本文全部基于HTML進行講解，沒有考慮XML，XHTML的情況，請知悉。
一、元素選擇器
通配選擇器
語法：
* { sRules }
說明：
選定文檔所有的元素
示例：
* { color: red; }
<div>我是div</div>
元素選擇器
語法：
E { sRules }
說明：
選定指定的文檔元素E
示例：
p {
color: red; }
<p>我是p</p>
二、類選擇器和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>
三、屬性選擇器
根據簡單屬性選擇
語法：
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>
四、關系選擇器
后代選擇器
語法：
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>
四、偽類和偽元素選擇器
偽類選擇器
語法：
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
文章列表
留言列表
