講給Android程式設計師看的前端教程(15)——CSS選擇器(5)
在之前的幾篇部落格中分別介紹了CSS中常用的選擇器：標籤選擇器，類選擇器，ID選擇器，萬用字元選擇器。在本篇部落格中，我們將學習這些選擇器的複合使用。
並集選擇器
並集選擇器由各個選擇器通過逗號連線而成的，它為不同的標籤設定相同的CSS樣式；語法格式如下：
selector1,selector2,selector3... {
property1 : value1;
property2 : value2;
property3 : value3;
property4 : value4;
..................
}
請看如下示例：
<!DOCTYPE html> 在該示例中通過並集選擇器統一為div標籤，class屬性為welcome的標籤，id屬性為title的標籤設定了樣式。效果圖如下所示：
標籤指定式選擇器
標籤指定式選擇器用於為指定的標籤設定CSS樣式；它所表示的是一種”既….並且….”的關係，強調的是一種”同時滿足，缺一不可”的選擇條件。它最常見的用法是標籤名與類選擇器的結合或者標籤名與ID選擇器的結合，所以更加具體地來說標籤指定式選擇器有兩種寫法：
- 第一種：
標籤名.類選擇器名{
property1 : value1;
property2 : value2;
property3 : value3;
property4 : value4;
..................
}
- 第二種：
標籤名#ID選擇器名{
property1 : value1;
property2 : value2;
property3 : value3;
property4 : value4;
..................
}
請看如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標籤指定式選擇器</title>
<style type="text/css">
p.welcome{
font-size: 23px;
color: red;
}
</style>
</head>
<body>
<p class="welcome">歡迎訪問我的部落格</p>
<p id="title">谷哥的小弟</p>
<div>http://blog.csdn.net/lfdfhl</div>
</body>
</html>
在該例項中通過標籤指定式選擇器為p標籤中class屬性等於welcome的標籤設定了樣式，效果圖如下：
後代選擇器
後代選擇器又稱為包含選擇器；與標籤指定式選擇器強調的"既….並且….“不同，後代選擇器強調的是"巢狀”，語法格式如下：
selector1 selector2 selector3... {
property1 : value1;
property2 : value2;
property3 : value3;
property4 : value4;
..................
}
請看如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
div .welcome {
font-size: 23px;
color: red;
}
</style>
</head>
<body>
<div>
<div>
<section>
<p class="welcome">hello everyone</p>
</section>
</div>
<p class="welcome">歡迎訪問我的部落格</p>
<p class="welcome">一起交流開發技術</p>
</div>
<p id="title">谷哥的小弟</p>
<div>http://blog.csdn.net/lfdfhl</div>
</body>
</html>
在該例項中通過後代選擇器為div標籤裡的所有class屬性等於welcome的標籤設定了樣式，效果圖如下：
嗯哼，看到了不：div標籤中，不管是子元素，還是孫子元素只要其class屬性等於welcome那麼都會加上特定的樣式。
子選擇器
子選擇器用於為指定標籤的第一代子元素設定樣式，語法格式如下：
selector1 > selector2{
property1 : value1;
property2 : value2;
property3 : value3;
property4 : value4;
..................
}
請看如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子選擇器</title>
<style type="text/css">
div>.welcome {
font-size: 23px;
color: red;
}
</style>
</head>
<body>
<div>
<div>
<section>
<p class="welcome">hello everyone</p>
</section>
</div>
<p class="welcome">歡迎訪問我的部落格</p>
<p class="welcome">一起交流開發技術</p>
</div>
<p id="title">谷哥的小弟</p>
<div>http://blog.csdn.net/lfdfhl</div>
</body>
</html>
在此，通過子選擇器為div標籤裡的class屬性等於welcome的直接子標籤設定了樣式，效果圖如下所示：
在此，請注意：後代選擇器和子選擇器的區別：
子選擇器僅作用於標籤的直接後代(第一代後代)；而後代選擇器作用於標籤的所有子孫後代元素
屬性選擇器
之前講過ID選擇器和類選擇器，這兩個選擇器都是基於標籤的id屬性或者class屬性實現的。現在，我們來繼續學習屬性選擇器，它可以為擁有指定屬性(不僅限於 class 和 id 屬性)的標籤設定樣式。
示例1
為帶有 title 屬性的所有元素設定樣式
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title] {
color: red;
}
</style>
</head>
<body>
<h2 title="Hello world">Hello world</h2>
<a title="hi" href="http://www.ifeng.com">歡迎您</a>
</body>
</html>
結果如下:
示例2
為 title=“hi” 的所有元素設定樣式
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title=hi] {
color: red;
}
</style>
</head>
<body>
<h2 title="Hello world">Hello world</h2>
<a title="hi" href="http://www.ifeng.com">歡迎您</a>
</body>
</html>
結果如下：
示例3
為title屬性的值包含hi的所有標籤設定樣式；適用於由空格分隔的屬性值。
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title~=hi] {
color: red;
}
</style>
</head>
<body>
<h2 title="Hello hi">Hello world</h2>
<h2 title="Hellohi">welcome</h2>
<a title="hi" href="http://www.ifeng.com">歡迎您</a>
</body>
</html>
結果如下：
示例4
為lang 屬性的值包含en的所有標籤設定樣式；適用於由連字元分隔的屬性值：
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[lang|=en] {
color: red;
}
</style>
</head>
<body>
<p lang="en">Hello</p>
<p lang="en-us">Hi</p>
<p lang="us">歡迎</p>
<p lang="zh">welcome</p>
</body>
</html>
結果如下：
示例5
屬性選擇器在表單中的應用。
語法格式：
標籤名[屬性=”屬性值”]
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
<input type="text" name="username" value="username" size="20">
<input type="text" name="password" value="password" size="20">
<input type="button" value="This is button">
</form>
</body>
</html>
結果如下：
