CSS選取器筆記

一、元素選擇符

1. *

* {  margin: 0;  padding: 0;}

在我們看比較進階的選取器之前，應該認識下這個眾所周知的清空選取器。星號呢會將頁面上所有每一個元素都選到。許多開發人員都用它來清空`margin`和`padding`。當然你在練習的時候使用這個沒問題，但是我不建議在生產環境中使用它。它會給瀏覽器憑添許多不必要的東西。
`*`也可以用來選擇某元素的所有子項目。

#container * {  border: 1px solid black;}

它會選中`#container`下的所有元素。

2. E

a { color: red; }ul { margin-left: 0; }

如果你想定位頁面上所有的某標籤，不是通過`id`或者是’class’，直接使用標籤選取器。

3. .info

.error {  color: red;}

這是個`class`選取器。它跟`id`選取器不同的是，它可以定位多個元素。當你想對多個元素進行樣式修飾的時候就可以使用`class`。當你要對某個特定的元素進行修飾那就是用`id`來定位它。

4. #footer

#container {   width: 960px;   margin: auto;}

在選取器中使用`#`可以用id來定位某個元素。

二、多元素的組合選取器

5. E,F

a,li { color: red; }

匹配所有的a元素和li元素

6. E F

li a {  text-decoration: none;}

只匹配li後面多有的a元素（包括孫子輩）

7. E > F

div#container > ul {  border: 1px solid black;}

只匹配li後面多有的a元素（不包括孫子輩）`E F`和`E > F`的差別就是後面這個指揮選擇它的直接子項目。看下面的例子：

 
    
  
 List Item
    
  
 
   
 Child 
 
  
    
  
 List Item 
    
  
 List Item 
    
  
 List Item 
 

`#container > ul`只會選中`id`為’container’的`div`下的所有直接`ul`元素。它不會定位到如第一個`li`下的`ul`元素。

8. E + F

ul + p {   color: red;}

這個叫相鄰選取器。它指揮選中指定元素的直接後繼元素。上面那個例子就是選中了所有`ul`標籤後面的第一段，並將它們的顏色都設定為紅色。

9. E~F

ul ~ p {  color: red;}

`ul + p`選取器只會選擇緊挨跟著指定元素的那些元素。而這個選取器，會選擇跟在目標元素後面的所有匹配的元素。

三、關係選取器

10. E[att]

匹配所有具有att屬性的E元素，不考慮它的值。

 
    
  
外部連結
    
  
內部連結
    
  
外部連結
    
  
內部連結
 

上面的這個例子中，只會選擇有class屬性的元素。那些沒有此屬性的將不會被這個代碼修飾。

11. E[att=val]

匹配所有att屬性等於"val"的E元素

a[class="external"]{color:#f00;}

上面這片代碼將會把`class`屬性值為`external`的標籤設定為紅色，而其他標籤則不受影響。

12. E[att~=val]

匹配所有att屬性具有多個空格分隔的值、其中一個值等於"val"的E元素

 
    
  
外部連結
    
  
內部連結
    
  
外部連結
    
  
內部連結
 

這個`~`符號可以定位那些某屬性值是空格分隔多值的標籤（因此只有外部連結是紅色字型）。

13. E[att|=val]

選擇具有att屬性且屬性值為以val開頭並用串連符"-"分隔的字串的E元素。

 
    
  
清單項目1
    
  
清單項目2
    
  
清單項目3
    
  
清單項目4
    
  
清單項目5
    
  
清單項目6
 

因此只有項目3為紅色。

14. E[att^="val"]

選擇具有att屬性且屬性值為以val開頭的字串的E元素。

 
    
  
清單項目1
    
  
清單項目2
    
  
清單項目3
    
  
清單項目4
    
  
清單項目5
    
  
清單項目6
 

li[class^="a"]{color:#f00;}

選擇具有class屬性且屬性值為以a開頭的字串的E元素(因此只有項目1、2為紅色)。

15. E[att$="val"]

匹配所有att屬性以"val"結尾的元素

li[class$="a"]{color:#f00;}

選擇具有class屬性且屬性值為以a結尾的字串的E元素(項目4、6為紅色)。

16. E[att*="val"]

匹配所有att屬性包含"val"字串的元素

li[class*="a"]{color:#f00;}

因為class的屬性中都含有字母a所以結果均為紅色。

四、偽類別選取器

17. E:link

設定超連結a在未被訪問前的樣式。

 
    
  
外部連結
    
  
內部連結
    
  
外部連結
    
  
內部連結
 

a:link{color:#03c;}.external:link{color:#f00;}

運行結果：外部連結為紅色；內部連結為藍色

18. E:visited

設定超連結a在其連結地址已被訪問過時的樣式。

19. E:hover

設定元素在其滑鼠移至上方時的樣式。

20. E:active

設定元素在被使用者啟用（在滑鼠點擊與釋放之間發生的事件）時的樣式。

21. E:first-child

匹配父元素的第一個子項目E。

 
    
  
test1
    
  
test2
    
  
test3
    
  
test4
    
  
test5
 

li:first-child{color:#f00;}

結果只有列表第一條資訊test1為紅色

22. E:last-child

匹配父元素的最後一個子項目E。

li:last-child{color:#f00;}

結果只有列表最後一條資訊test5為紅色

23. E:only-child

匹配父元素僅有的一個子項目E。

 
    
  
test1
 
 
   
  
test2
    
  
test3
    
  
test4
 

li:only-child{color:#f00;}

結果只有列表test1為紅色

24. E:nth-child(n)

匹配父元素的第n個子項目E。

li:nth-child(3){color:#f00;}

結果只有列表test3為紅色

25. E:nth-last-child(n)

匹配父元素的倒數第n個子項目E。

li:nth-last-child(3){color:#f00;}

結果只有列表test3為紅色

26. E:first-of-type

匹配同類型中的第一個同級兄弟元素E。

    我是一個div元素    
這是段落1
    
這是段落2
    
這是段落3
    
這是段落4
    
這是段落5

p:first-of-type{color:#f00;}

結果只有這是段落1為紅色。

27. E:last-of-type

匹配同類型中的最後一個同級兄弟元素E。

p:last-of-type{color:#f00;}

結果只有這是段落5為紅色。

28. E:only-of-type

匹配同類型中的唯一的一個同級兄弟元素E。

b:only-of-type{color:f00;}

結果只有我是一個div元素為紅色。

29. E:nth-of-type(n)

匹配同類型中的第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顯示為紅色。

30. E:nth-last-of-type(n)

匹配同類型中的倒數第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顯示為紅色。

