CSS選擇器詳解

本文所有基於HTML進行講解，沒有考慮XML，XHTML的狀況，請知悉。

1、元素選擇器

通配選擇器

語法：

* { sRules }

說明：

選定文檔全部的元素

示例：

* {
　　color: red;  
}

<div>我是div</div>

元素選擇器

語法：

E { sRules }

說明：

選定指定的文檔元素E

示例：

p {
　　color: red;  
}

<p>我是p</p>

2、類選擇器和ID選擇器

類選擇器

語法：

E.myclass { sRules }

說明：

選定class屬性包含myclass的文檔元素E

示例：

.myClass {
　　color: red
}

<div class="myclass">我是div</div>

多類選擇器

語法：

E.myclass.myotherclass { sRules }

說明：

選定class屬性包含myclass以及myotherclass的文檔元素E

示例：

.myClass.myotherclass {
　　color: red
}

<div class="myclass myotherclass">我是div</div>

ID選擇器

語法：

E#myid { sRules }

說明：

選定id屬性值爲myid的文檔元素E

示例：

#myid {
　　color: red;
}

<div id="myid">我是div</div>

3、屬性選擇器

根據簡單屬性選擇

語法：

E[attr] { sRules }

說明：

選定具備屬性attr的文檔元素E

示例：

div[id] {
　　color: red;
}

<div id="myid">我是div</div>

根據具體屬性值選擇

語法：

E[attr="val"] { sRules }

說明：

選定具備屬性attr且屬性值等於val的文檔元素E

示例：

div[id="myid"] {
　　color: red;
}

/* 多個屬性-值 */
input[type="text"][class="text1"] {
　　width: 20px;
}

<div id="myid">我是div</div>
<input type="text" class="text1" />

根據部分屬性值選擇

語法：

E[attr~="val"] { sRules }

說明：

選定具備屬性attr且屬性值爲一用空格分隔的字詞列表，其中一個等於val（包含只有一個值且該值等於val的狀況）的文檔元素E

示例：

div[class~="div1"] {
　　color: red;
}

<div calss="div1">我是div</div>
<div class="div1 header">我是div</div>

語法：

E[attr^="val"] { sRules }

說明：

選定具備屬性attr且屬性值以val開頭的字符串的文檔元素E

示例：

div[class^="head"] {
　　color: red;
}

<div calss="headClass">我是div</div>

語法：

E[attr$="val"] { sRules }

說明：

選定具備屬性attr且屬性值以val結尾的字符串的文檔元素E

示例：

div[class$="Class"] {
　　color: red;
}

<div calss="headClass">我是div</div>

語法：

E[attr*="val"] { sRules }

說明：

選定具備屬性attr且屬性值包含val的字符串的文檔元素E

示例：

div[class*="Div"] {
　　color: red;
}

<div calss="headDivClass">我是div</div>

語法：

E[attr|="val"] { sRules }

說明：

選定具備屬性attr且屬性值以val開頭並用鏈接符"-"分隔的字符串（包含屬性值只有val的狀況）的文檔元素E

示例：

div[class|="head"] {
　　color: red;
}

<div calss="head-class">我是div</div>

4、關係選擇器

後代選擇器

語法：

E F { sRules }

說明：

選定文檔元素E全部的後代元素F，包含全部子孫

示例：

/* 選中後代全部的p */
div p {
　　color: red;
}

<div>
　　<p>我是段落1</p>
　　<div>
　　　　<p>我是段落2</p>
　　</div>
</div>

子代選擇器

語法：

E>F { sRules }

說明：

選定文檔元素E全部的子代元素F，不包含孫代元素

示例：

/* 選中子代的p，但選中不了孫代的p */
div>p {
　　color: red;
}

<div>
　　<p>我是段落1</p>
　　<div>
　　　　<p>我是段落2</p>
　　</div>
</div>

相鄰選擇器

語法：

E+F { sRules }

說明：

選定文檔元素E以後且同屬一個父元素的相鄰兄弟元素F

示例：

/* 只能選中h1相鄰的p */
h1>p {
　　color: red;
}

<div>
　　<h1>我是h1</h1>
　　<p>我是段落1</p>
　　<p>我是段落2</p>
</div>

兄弟選擇器

語法：

E~F { sRules }

說明：

選定文檔元素E以後且同屬一個父元素的兄弟元素F

示例：

/* 選中h1以後全部的p */
h1>p {
　　color: red;
}

<div>
　　<h1>我是h1</h1>
　　<p>我是段落1</p>
　　<p>我是段落2</p>
</div>

4、僞類和僞元素選擇器

僞類選擇器

語法：

a:link { sRules }

說明：

設置超連接a未被訪問前的樣式

示例：

a:link {
　　color: blue;
}

<a href="http://i.cnblogs.com"></a>

語法：

a:visited { sRules }

說明：

設置超連接a已經被訪問後的樣式

示例：

a:link {
　　color: red;
}

<a href="http://i.cnblogs.com"></a>

語法：

E:focus { sRules }

說明：

設置元素E在成爲輸入焦點（該元素的onfocus事件發生）時的樣式

示例：

a:focus {
　　color: black;
}

<a href="http://i.cnblogs.com"></a>

語法：

E:hover { sRules }

說明：

設置元素E在鼠標懸停時的樣式

示例：

a:hover {
　　color: red;
}

<a href="http://i.cnblogs.com"></a>

語法：

E:active { sRules }

說明：

設置元素E在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式

示例：

a:active{
　　color: green;
}

<a href="http://i.cnblogs.com"></a>

以上五種僞類選擇器同時用在a超連接時，各僞類需按特定的順序書寫才能生效，保證各瀏覽器具備相同的表現。正確的順序爲：link - visited - focus - hover - active

語法：

E:lang(lang) { sRules }

說明：

選定使用特殊語言的元素E

示例：

p:lang(zh-cn) {
    color: #f00;
}
p:lang(en) {
    color: #090;
}

<p lang="zh-cn">我是中文</p>
<p lang="en">i am English</p>

 更多關於CSS選擇器可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors