| 序號 | 選擇器 | 含義 |
| 1. | * | 通用元素選擇器，匹配任何元素 |
| 2. | E | 標簽選擇器，匹配所有使用E標簽的元素 |
| 3. | .info | class選擇器，匹配所有class屬性中包含info的元素 |
| 4. | #footer | id選擇器，匹配所有id屬性等于footer的元素 |
* { margin: 0; padding: 0; }
在我們看比較高級的選擇器之前，應該認識下這個眾所周知的清空選擇器。星號呢會將頁面上所有
每一個元素都選到。許多開發者都用它來清空`margin`和`padding`。當然你在練習
的時候使用這個沒問題，但是我不建議在生產環境中使用它。它會給瀏覽器憑添許多不必要的東西。
`*`也可以用來選擇某元素的所有子元素。
#container * { border: 1px solid black; }
它會選中`#container`下的所有元素。
a { color: red; } ul { margin-left: 0; }
如果你想定位頁面上所有的某標簽，不是通過`id`或者是’class’，直接使用標簽選擇器。
.error { color: red; }
這是個`class`選擇器。它跟`id`選擇器不同的是，它可以定位多個元素。當你想對多個元素進行樣式
修飾的時候就可以使用`class`。當你要對某個特定的元素進行修飾那就是用`id`來定位它。
#container { width: 960px; margin: auto; }
在選擇器中使用`#`可以用id來定位某個元素。
| 序號 | 選擇器 | 含義 |
| 5. | E,F | 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 |
| 6. | E F | 后代元素選擇器，匹所有屬于E元素后代的F元素，E和F之間用空格分隔 |
| 7. | E > F | 子元素選擇器，匹配所有E元素的子元素F |
| 8. | E + F | 相鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F |
| 9. | E~F | 匹配任何在E元素之后的同級F元素 |
a,li { color: red; }
匹配所有的a元素和li元素
li a { text-decoration: none; }
只匹配li后面多有的a元素（包括孫子輩）
div#container > ul { border: 1px solid black; }
只匹配li后面多有的a元素（不包括孫子輩）`E F`和`E > F`的差別就是后面這個指揮選擇它的
直接子元素。看下面的例子：
1 <div id="container"> 2 <ul> 3 <li> List Item</li> 4 <ul> 5 <li> Child </li> 6 </ul> 7 <li> List Item </li> 8 <li> List Item </li> 9 <li> List Item </li> 10 </ul> 11 </div>
`#container > ul`只會選中`id`為’container’的`div`下的所有直接`ul`
元素。它不會定位到如第一個`li`下的`ul`元素。
ul + p { color: red; }
這個叫相鄰選擇器。它指揮選中指定元素的直接后繼元素。上面那個例子就是選中了所有`ul`
標簽后面的第一段，并將它們的顏色都設置為紅色。
ul ~ p { color: red; }
`ul + p`選擇器只會選擇緊挨跟著指定元素的那些元素。而這個選擇器，會選擇跟在
目標元素后面的所有匹配的元素。
| 序號 | 選擇器 | 含義 |
| 10. | E[att] | 匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如"[cheacked]"。以下同。） |
| 11. | E[att=val] | 匹配所有att屬性等于"val"的E元素 |
| 12. | E[att~=val] | 匹配所有att屬性具有多個空格分隔的值、其中一個值等于"val"的E元素 |
| 13. | E[att|=val] | 匹配所有att屬性且屬性值為以val開頭并用連接符"-"分隔的字符串的E元素。 |
| 14. | E[att^="val"] | 匹配所有att屬性以"val"開頭的元素 |
| 15. | E[att$="val"] | 匹配所有att屬性以"val"結尾的元素 |
| 16. | E[att*="val"] | 匹配所有att屬性包含"val"字符串的元素 |
匹配所有具有att屬性的E元素，不考慮它的值。
1 <style> 2 a[class]{color:#f00;} 3 </style> 4 </head> 5 <body> 6 <ul> 7 <li><a href="?" class="external">外部鏈接</a></li> 8 <li><a href="?">內部鏈接</a></li> 9 <li><a href="?" class="external">外部鏈接</a></li> 10 <li><a href="?">內部鏈接</a></li> 11 </ul> 12 </body>
上面的這個例子中，只會選擇有class屬性的元素。那些沒有此屬性的將不會被這個代碼修飾。
匹配所有att屬性等于"val"的E元素
a[class="external"]{color:#f00;}
上面這片代碼將會把`class`屬性值為`external`的標簽設置為紅色，而其他標簽則不受影響。
匹配所有att屬性具有多個空格分隔的值、其中一個值等于"val"的E元素
<style> a[class~="external"]{color:#f00;} </style> </head> <body> <ul> <li><a href="?" class="external txt">外部鏈接</a></li> <li><a href="?" class="txt">內部鏈接</a></li> <li><a href="?" class="external txt">外部鏈接</a></li> <li><a href="?" class="txt">內部鏈接</a></li> </ul> </body>
這個`~`符號可以定位那些某屬性值是空格分隔多值的標簽（因此只有外部鏈接是紅色字體）。
選擇具有att屬性且屬性值為以val開頭并用連接符"-"分隔的字符串的E元素。
1 <style> 2 li[class|="test3"]{color:#f00;} 3 </style> 4 </head> 5 <body> 6 <ul> 7 <li class="test1-abc">列表項目1</li> 8 <li class="test2-abc">列表項目2</li> 9 <li class="test3-abc">列表項目3</li> 10 <li class="test4-abc">列表項目4</li> 11 <li class="test5-abc">列表項目5</li> 12 <li class="test6-abc">列表項目6</li> 13 </ul> 14 </body>
因此只有項目3為紅色。
1 <body> 2 <ul> 3 <li class="abc">列表項目1</li> 4 <li class="acb">列表項目2</li> 5 <li class="bac">列表項目3</li> 6 <li class="bca">列表項目4</li> 7 <li class="cab">列表項目5</li> 8 <li class="cba">列表項目6</li> 9 </ul> 10 </body>
li[class^="a"]{color:#f00;}
選擇具有class屬性且屬性值為以a開頭的字符串的E元素(因此只有項目1、2為紅色)。
匹配所有att屬性以"val"結尾的元素
li[class$="a"]{color:#f00;}
選擇具有class屬性且屬性值為以a結尾的字符串的E元素(項目4、6為紅色)。
匹配所有att屬性包含"val"字符串的元素
li[class*="a"]{color:#f00;}
因為class的屬性中都含有字母a所以結果均為紅色。
| 17. | E:link | 匹配所有未被點擊的鏈接 |
| 18. | E:visited | 匹配所有已被點擊的鏈接 |
| 19. | E:hover | 匹配鼠標懸停其上的E元素 |
| 20. | E:active | 匹配鼠標已經其上按下、還沒有釋放的E元素 |
| 21. | E:first-child | 匹配父元素的第一個子元素E |
| 22. | E:last-child | 匹配父元素的最后一個子元素E |
| 23. | E:only-child | 匹配父元素僅有的一個子元素E |
| 24. | E:nth-child(n) | 匹配父元素的第n個子元素E |
| 25. | E:nth-last-child(n) | 匹配父元素的倒數第n個子元素E |
| 26. | E:first-of-type | 匹配同類型中的第一個同級兄弟元素E |
| 27. | E:last-of-type | 匹配同類型中的最后一個同級兄弟元素E |
| 28. | E:only-of-type | 匹配同類型中的唯一的一個同級兄弟元素E |
| 29. | E:nth-of-type(n) | 匹配同類型中的第n個同級兄弟元素E |
| 30. | E:nth-last-of-type(n) | 匹配同類型中的倒數第n個同級兄弟元素E |
設置超鏈接a在未被訪問前的樣式。
1 <ul> 2 <li><a href="?" class="external">外部鏈接</a></li> 3 <li><a href="?">內部鏈接</a></li> 4 <li><a href="?" class="external">外部鏈接</a></li> 5 <li><a href="?">內部鏈接</a></li> 6 </ul>
a:link{color:#03c;} .external:link{color:#f00;}
運行結果：外部鏈接為紅色；內部鏈接為藍色
設置超鏈接a在其鏈接地址已被訪問過時的樣式。
設置元素在其鼠標懸停時的樣式。
設置元素在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式。
匹配父元素的第一個子元素E。
1 <body> 2 <ul> 3 <li>test1</li> 4 <li>test2</li> 5 <li>test3</li> 6 <li>test4</li> 7 <li>test5</li> 8 </ul> 9 </body>
li:first-child{color:#f00;}
結果只有列表第一條信息test1為紅色
匹配父元素的最后一個子元素E。
li:last-child{color:#f00;}
結果只有列表最后一條信息test5為紅色
匹配父元素僅有的一個子元素E。
1 <ul> 2 <li>test1</li> 3 </ul> 4 <ul> 5 <li>test2</li> 6 <li>test3</li> 7 <li>test4</li> 8 </ul>
li:only-child{color:#f00;}
結果只有列表test1為紅色
匹配父元素的第n個子元素E。
li:nth-child(3){color:#f00;}
結果只有列表test3為紅色
匹配父元素的倒數第n個子元素E。
li:nth-last-child(3){color:#f00;}
結果只有列表test3為紅色
匹配同類型中的第一個同級兄弟元素E。
1 <div class="test"> 2 <div><b>我是一個div元素</b></div> 3 <p>這是段落1</p> 4 <p>這是段落2</p> 5 <p>這是段落3</p> 6 <p>這是段落4</p> 7 <p>這是段落5</p> 8 </div>
p:first-of-type{color:#f00;}
結果只有這是段落1為紅色。
匹配同類型中的最后一個同級兄弟元素E。
p:last-of-type{color:#f00;}
結果只有這是段落5為紅色。
匹配同類型中的唯一的一個同級兄弟元素E。
b:only-of-type{color:f00;}
結果只有我是一個div元素為紅色。
匹配同類型中的第n個同級兄弟元素E,n 可以代表數字也可以代表字母。
p:nth-of-type(2){color:#f00;}
結果只有這是段落2為紅色。
n為odd時表示奇數；n為even表示偶數；
p:nth-of-type(odd){color:#f00;}
結果：段落1、3、5顯示為紅色。
p:nth-of-type(even){color:#f00;}
結果：段落2、4顯示為紅色。
匹配同類型中的倒數第n個同級兄弟元素E，n 可以代表數字也可以代表字母。。
p:nth-last-of-type(2){color:#f00;}
結果：段落4顯示為紅色。
n為odd時表示奇數；n為even表示偶數；
p:nth-last-of-type(odd){color:#f00;}
結果：段落1、3、5顯示為紅色。
p:nth-last-of-type(even){color:#f00;}
結果：段落2、4顯示為紅色。
【 微信掃一掃 】
