CSS選擇器筆記

2016/10/14 8:32:16 閱讀：1793 發(fā)布者：1793

一、元素選擇符

序號(hào)	選擇器	含義
1.	*	通用元素選擇器，匹配任何元素
2.	E	標(biāo)簽選擇器，匹配所有使用E標(biāo)簽的元素
3.	.info	class選擇器，匹配所有class屬性中包含info的元素
4.	#footer	id選擇器，匹配所有id屬性等于footer的元素

1. *

* { 
  margin: 0; 
  padding: 0; 
}

在我們看比較高級(jí)的選擇器之前，應(yīng)該認(rèn)識(shí)下這個(gè)眾所周知的清空選擇器。星號(hào)呢會(huì)將頁面上所有
每一個(gè)元素都選到。許多開發(fā)者都用它來清空`margin`和`padding`。當(dāng)然你在練習(xí)
的時(shí)候使用這個(gè)沒問題，但是我不建議在生產(chǎn)環(huán)境中使用它。它會(huì)給瀏覽器憑添許多不必要的東西。
`*`也可以用來選擇某元素的所有子元素。

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

它會(huì)選中`#container`下的所有元素。

2. E

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

如果你想定位頁面上所有的某標(biāo)簽，不是通過`id`或者是’class’，直接使用標(biāo)簽選擇器。

3. .info

.error { 
  color: red; 
}

這是個(gè)`class`選擇器。它跟`id`選擇器不同的是，它可以定位多個(gè)元素。當(dāng)你想對(duì)多個(gè)元素進(jìn)行樣式
修飾的時(shí)候就可以使用`class`。當(dāng)你要對(duì)某個(gè)特定的元素進(jìn)行修飾那就是用`id`來定位它。

4. #footer

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

在選擇器中使用`#`可以用id來定位某個(gè)元素。

二、多元素的組合選擇器

序號(hào)	選擇器	含義
5.	E,F	多元素選擇器，同時(shí)匹配所有E元素或F元素，E和F之間用逗號(hào)分隔
6.	E F	后代元素選擇器，匹所有屬于E元素后代的F元素，E和F之間用空格分隔
7.	E > F	子元素選擇器，匹配所有E元素的子元素F
8.	E + F	相鄰元素選擇器，匹配所有緊隨E元素之后的同級(jí)元素F
9.	E~F	匹配任何在E元素之后的同級(jí)F元素

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`的差別就是后面這個(gè)指揮選擇它的
直接子元素。看下面的例子：

 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`只會(huì)選中`id`為’container’的`div`下的所有直接`ul`
元素。它不會(huì)定位到如第一個(gè)`li`下的`ul`元素。

8. E + F

ul + p { 
   color: red; 
}

這個(gè)叫相鄰選擇器。它指揮選中指定元素的直接后繼元素。上面那個(gè)例子就是選中了所有`ul`
標(biāo)簽后面的第一段，并將它們的顏色都設(shè)置為紅色。

9. E~F

ul ~ p { 
  color: red; 
}

`ul + p`選擇器只會(huì)選擇緊挨跟著指定元素的那些元素。而這個(gè)選擇器，會(huì)選擇跟在
目標(biāo)元素后面的所有匹配的元素。

三、關(guān)系選擇器

序號(hào)	選擇器	含義
10.	E[att]	匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如"[cheacked]"。以下同。）
11.	E[att=val]	匹配所有att屬性等于"val"的E元素
12.	E[att~=val]	匹配所有att屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于"val"的E元素
13.	E[att\|=val]	匹配所有att屬性且屬性值為以val開頭并用連接符"-"分隔的字符串的E元素。
14.	E[att^="val"]	匹配所有att屬性以"val"開頭的元素
15.	E[att$="val"]	匹配所有att屬性以"val"結(jié)尾的元素
16.	E[att*="val"]	匹配所有att屬性包含"val"字符串的元素

10. E[att]

匹配所有具有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="?">內(nèi)部鏈接</a></li> 
 9     <li><a href="?" class="external">外部鏈接</a></li> 
10     <li><a href="?">內(nèi)部鏈接</a></li> 
11 </ul> 
12 </body>

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

11. E[att=val]

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

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

上面這片代碼將會(huì)把`class`屬性值為`external`的標(biāo)簽設(shè)置為紅色，而其他標(biāo)簽則不受影響。

12. E[att~=val]

匹配所有att屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于"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">內(nèi)部鏈接</a></li> 
    <li><a href="?" class="external txt">外部鏈接</a></li> 
    <li><a href="?" class="txt">內(nèi)部鏈接</a></li> 
</ul> 
</body>

這個(gè)`~`符號(hào)可以定位那些某屬性值是空格分隔多值的標(biāo)簽（因此只有外部鏈接是紅色字體）。

13. E[att|=val]

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

 1 <style> 
 2 li[class|="test3"]{color:#f00;} 
 3 </style> 
 4 </head> 
 5 <body> 
 6 <ul> 
 7     <li class="test1-abc">列表項(xiàng)目1</li> 
 8     <li class="test2-abc">列表項(xiàng)目2</li> 
 9     <li class="test3-abc">列表項(xiàng)目3</li> 
10     <li class="test4-abc">列表項(xiàng)目4</li> 
11     <li class="test5-abc">列表項(xiàng)目5</li> 
12     <li class="test6-abc">列表項(xiàng)目6</li> 
13 </ul> 
14 </body>

因此只有項(xiàng)目3為紅色。

14. E[att^="val"]

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

 1 <body> 
 2 <ul> 
 3     <li class="abc">列表項(xiàng)目1</li> 
 4     <li class="acb">列表項(xiàng)目2</li> 
 5     <li class="bac">列表項(xiàng)目3</li> 
 6     <li class="bca">列表項(xiàng)目4</li> 
 7     <li class="cab">列表項(xiàng)目5</li> 
 8     <li class="cba">列表項(xiàng)目6</li> 
 9 </ul> 
10 </body>

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

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

15. E[att$="val"]

匹配所有att屬性以"val"結(jié)尾的元素

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

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

16. E[att*="val"]

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

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

因?yàn)閏lass的屬性中都含有字母a所以結(jié)果均為紅色。

四、偽類選擇器

17.	E:link	匹配所有未被點(diǎn)擊的鏈接
18.	E:visited	匹配所有已被點(diǎn)擊的鏈接
19.	E:hover	匹配鼠標(biāo)懸停其上的E元素
20.	E:active	匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
21.	E:first-child	匹配父元素的第一個(gè)子元素E
22.	E:last-child	匹配父元素的最后一個(gè)子元素E
23.	E:only-child	匹配父元素僅有的一個(gè)子元素E
24.	E:nth-child(n)	匹配父元素的第n個(gè)子元素E
25.	E:nth-last-child(n)	匹配父元素的倒數(shù)第n個(gè)子元素E
26.	E:first-of-type	匹配同類型中的第一個(gè)同級(jí)兄弟元素E
27.	E:last-of-type	匹配同類型中的最后一個(gè)同級(jí)兄弟元素E
28.	E:only-of-type	匹配同類型中的唯一的一個(gè)同級(jí)兄弟元素E
29.	E:nth-of-type(n)	匹配同類型中的第n個(gè)同級(jí)兄弟元素E
30.	E:nth-last-of-type(n)	匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E

17. E:link

設(shè)置超鏈接a在未被訪問前的樣式。

1 <ul> 
2     <li><a href="?" class="external">外部鏈接</a></li> 
3     <li><a href="?">內(nèi)部鏈接</a></li> 
4     <li><a href="?" class="external">外部鏈接</a></li> 
5     <li><a href="?">內(nèi)部鏈接</a></li> 
6 </ul>

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

運(yùn)行結(jié)果：外部鏈接為紅色；內(nèi)部鏈接為藍(lán)色

18. E:visited

設(shè)置超鏈接a在其鏈接地址已被訪問過時(shí)的樣式。

19. E:hover

設(shè)置元素在其鼠標(biāo)懸停時(shí)的樣式。

20. E:active

設(shè)置元素在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式。

21. E:first-child

匹配父元素的第一個(gè)子元素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;}

結(jié)果只有列表第一條信息test1為紅色

22. E:last-child

匹配父元素的最后一個(gè)子元素E。

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

結(jié)果只有列表最后一條信息test5為紅色

23. E:only-child

匹配父元素僅有的一個(gè)子元素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;}

結(jié)果只有列表test1為紅色

24. E:nth-child(n)

匹配父元素的第n個(gè)子元素E。

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

結(jié)果只有列表test3為紅色

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

匹配父元素的倒數(shù)第n個(gè)子元素E。

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

結(jié)果只有列表test3為紅色

26. E:first-of-type

匹配同類型中的第一個(gè)同級(jí)兄弟元素E。

1 <div class="test"> 
2     <div><b>我是一個(gè)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;}

結(jié)果只有這是段落1為紅色。

27. E:last-of-type

匹配同類型中的最后一個(gè)同級(jí)兄弟元素E。

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

結(jié)果只有這是段落5為紅色。

28. E:only-of-type

匹配同類型中的唯一的一個(gè)同級(jí)兄弟元素E。

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

結(jié)果只有我是一個(gè)div元素為紅色。

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

匹配同類型中的第n個(gè)同級(jí)兄弟元素E,n 可以代表數(shù)字也可以代表字母。

p:nth-of-type(2){color:#f00;}

結(jié)果只有這是段落2為紅色。

n為odd時(shí)表示奇數(shù)；n為even表示偶數(shù)；

p:nth-of-type(odd){color:#f00;}

結(jié)果：段落1、3、5顯示為紅色。

p:nth-of-type(even){color:#f00;}

結(jié)果：段落2、4顯示為紅色。

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

匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E，n 可以代表數(shù)字也可以代表字母。。

p:nth-last-of-type(2){color:#f00;}

結(jié)果：段落4顯示為紅色。