Java培訓(xùn)之30個(gè)你不可不知的CSS選擇器

1. *（通配符）
*通配符選擇器，經(jīng)常用于css reset（樣式重置），清理標(biāo)簽的默認(rèn)樣式，但現(xiàn)在一般不提倡直接使用*了，主要是*會(huì)匹配所有標(biāo)簽，相當(dāng)耗資源。*在css的優(yōu)先級(jí)中是最低的。

* {margin: 0; padding: 0;} 也可以用*來(lái)匹配某一元素下的所有子元素：

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

2. #X（ID）
#+id名，這是日常常用的css選擇器，用于匹配id為XXX的元素，id選擇器的優(yōu)勢(shì)是精準(zhǔn)，高優(yōu)先級(jí)（優(yōu)先級(jí)基數(shù)為100，遠(yuǎn)高于class的10），作為javascript腳本鉤子的不二選擇，同樣缺點(diǎn)也很明顯：優(yōu)先級(jí)過(guò)高，重用性差，所以在使用id選擇器前，我們最好問(wèn)下自己，真的到了非用id選擇器的地步？

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

3. .X（類）
.+class名，標(biāo)準(zhǔn)的樣式選擇器，與id選擇器的區(qū)別是樣式選擇器可以選擇多個(gè)元素。樣式選擇器是提倡使用的選擇器，也是日常前端人員用到最多的選擇器了。

.error {color: red;}

4. X Y（后代）
li a {text-decoration: none;} 
目前非常常用的css選擇器，用于選取X元素下子元素Y，這里有個(gè)要留意的點(diǎn)是，這種方式的選擇器將選取其下所有匹配的子元素，無(wú)視層級(jí)，所以有的情況是不宜使用的，比如上述的代碼去掉li下的所有a的下劃線，但li里面還有個(gè)ul，我不希望ul下的li的a去掉下劃線。

使用此子孫選擇器的時(shí)候要考慮是否希望某樣式對(duì)所有子孫元素都起作用。

這種子孫選擇器還有個(gè)作用，就是創(chuàng)建類似命名空間的作用。比如上述代碼樣式的作用域明顯為li。

5. X（標(biāo)簽）
a { color: red; }
ul { margin-left: 0; } 
標(biāo)簽選擇器，優(yōu)先級(jí)僅僅比*高，常用于css reset（樣式重置）。

二、除IE6外瀏覽器支持的css選擇器

6. X:link X:visited X:hover X:active
a:link { color: red; }
a:visted { color: purple; } 
偽類選擇器，visted已被訪問(wèn)過(guò)的樣式，hover鼠標(biāo)經(jīng)過(guò)的樣式，link未被訪問(wèn)的樣式。三種偽類選擇器常用于鏈接，但不是說(shuō)只適用于鏈接，可惜的是IE6只支持將這三種偽類選擇器作用于鏈接。

這里說(shuō)明一點(diǎn)，由于CSS優(yōu)先級(jí)的關(guān)系(后面比前面的優(yōu)先級(jí)高)，這幾個(gè)偽類的書(shū)寫(xiě)順序，一般是link、visted、hover、active。

7. X + Y（相鄰）
ul + p { color: red;} 
相鄰選擇器，上述代碼中就會(huì)匹配在ul后面的第一個(gè)p，將段落內(nèi)的文字顏色設(shè)置為紅色。(只匹配一個(gè)元素)

8. X > Y（子）
子選擇器，留意X > Y與X Y的區(qū)別，前者是子孫選擇器，即無(wú)視層級(jí)，而X Y是字選擇器，只匹配X下的子元素Y。

從理論上來(lái)講X > Y是值得提倡選擇器，可惜IE6不支持。

9. X ~ Y
ul ~ p {color: red;}
相鄰選擇器，與X+Y類似，不同的是X ~ Y匹配的是元素集合，如上述代碼，匹配的是所有ul相鄰的p

10. X[title]
a[title] { color: green;} 
屬性選擇器，如上述代碼匹配的是帶有title屬性的鏈接元素。

11. X[title=""]
a[title="maomao"] {color:#096;} 
屬性選擇器，上述代碼不只匹配帶有title屬性，更匹配title屬性等于maomao的鏈接元素。[]內(nèi)不只可用title屬性，還可以使用其他屬性。

12. X[title*=""]
a[title*="mao"] {color:#096;} 
加了*號(hào)，意味著是模糊匹配，如上述代碼，會(huì)匹配title屬性為mao或maomao或maomao520等帶有maomao的鏈接屬性。

13. X[title^=""]
a[title^="maomao"]{color:#096;} 
模糊匹配,與*的作用相反，^起到排除的作用，比如上述代碼，會(huì)匹配title屬性不帶有maomao的鏈接屬性。

14. X[href$=""]
a[href$=".png"] { color: red;} 
在屬性選擇器中多一個(gè)$符號(hào)，用于匹配結(jié)尾為特定字符串的元素，比如上述代碼匹配的就是href屬性值的結(jié)尾為.png的鏈接。

15.X[data-*=""]
a[data-filetype="image"] {color: red;} 
data-filetype這個(gè)屬性目前用的實(shí)在不多，但有些場(chǎng)合非常好用。比如我要匹配所有的數(shù)據(jù)類型為圖片的鏈接，如果使用X[href$=""]的方式如下：

a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] {color: red;}

而使用data-filetype，只要：
a[data-filetype="image"] {color: red;} 
當(dāng)然前提是你給每一個(gè)鏈接加上data-filetype屬性。

16.X[foo~=""]
a[data-info~="external"] {color: red;} 
a[data-info~="image"] {border: 1px solid black;} 
這也是非常少用的選擇器，加上~號(hào)，有一種情況特別適用，比如你有個(gè)data-filetype=”external image”屬性，這時(shí)候我希望分別針對(duì)external和image樣式控制。

a[data-info~="external"] {color: red;} 
a[data-info~="image"] {border: 1px solid black;} 
上述代碼會(huì)匹配data-filetype=”external”、data-filetype=”image”、data-filetype=”external image”的a。

17.X:checked
input[type=radio]:checked {border: 1px solid black;} 
這個(gè)偽類選擇器只用于匹配帶有checked屬性的元素，比如radio、checkbox即單選框和多選框。

目前這個(gè)偽類選擇器，IE9下都不支持，非IE瀏覽器基本上都支持。

三、除IE8以下的瀏覽器支持的css選擇器

18.X:after
.clearfix:after {content: "";display: block;clear: both; visibility: hidden;font-size: 0; height: 0;}

.clearfix {*display: inline-block;_height: 1%;0} 
我想上面這段代碼，很多朋友都非常熟悉，是清理浮動(dòng)時(shí)常用的hack方法。:after偽類與content結(jié)合使用，用于往元素類追加內(nèi)容。:after偽類還有個(gè)妙用：用于產(chǎn)生陰影。

19.X:hover
div:hover {background: #e3e3e3;} 
hover在前面已經(jīng)介紹過(guò)，IE6下只支持a的hover。

這里提到一個(gè)很有意思的東西，即使用border-bottom: 1px solid black; 要好于text-decoration: underline；從實(shí)際的效果來(lái)看，使用border-bottom的距離比text-decoration來(lái)的合理，但使用border-bottom存在一些風(fēng)險(xiǎn)，比如顏色問(wèn)題。

20.X:not(selector)
div:not(#container) {color: blue;} 
否定偽類選擇器，這還是比較好理解的，上述將會(huì)把非id為container的div的字體顏色設(shè)置為藍(lán)色。

:not偽類IE8并不支持，IE9已經(jīng)支持了。

21.X::pseudoElement
p::first-line {font-weight: bold; font-size: 1.2em;}
::偽類，用于給元素的片段添加樣式，這如何理解呢？比如你要讓一個(gè)段落的第一行的文字加粗，那么這個(gè)選擇器是不二之選。

除此之外，你還可以給第一個(gè)字加上特殊樣式，這個(gè)應(yīng)用還是非常常見(jiàn)的

p::first-letter { float: left;font-size: 2em;font-weight: bold;font-family: cursive; padding-right: 2px;}
IE6居然支持！這足以讓人驚喜的…..

四、css3 結(jié)構(gòu)性偽類選擇器

22.X:nth-child(n)
li:nth-child(3) {color: red;}
:nth-child(n)，用于匹配索引值為n的子元素。索引值從1開(kāi)始。

X:nth-child()用法實(shí)際上有三種變化。X:nth-child()更強(qiáng)大的用處在于奇偶匹配。有興趣的請(qǐng)看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()偽類選擇器》

23.X:nth-last-child(n)
li:nth-last-child(2) {color: red;}
:nth-child(n)，是從第一個(gè)開(kāi)始算索引，而X:nth-last-child(n)是從最后一個(gè)開(kāi)始算索引。

24.X:nth-of-type(n)
ul:nth-of-type(3) {border: 1px solid black;}
nth-of-type與nth-child的效果是驚人的相似，想要更多的了解nth-of-type請(qǐng)看《Alternative for :nth-of-type() and :nth-child()》，《:nth-of-type(N)》。

25.X:nth-last-of-type(n)
ul:nth-last-of-type(3) {border: 1px solid black;}
:nth-last-child效果相似。

26.X:first-child
ul li:first-child {border-top: none;}
匹配子集的第一個(gè)元素。IE7就可以支持了，這個(gè)偽類還是非常有用的。

27.X:last-child
ul > li:last-child {color: green;}
與:first-child效果相反

留意IE8支持:first-child,但不支持:last-child。

28.X:only-child
div p:only-child {color: red;}
這個(gè)偽類一般用的比較少，比如上述代碼匹配的是div下的有且僅有一個(gè)的p，也就是說(shuō)，如果div內(nèi)有多個(gè)p，將不匹配。

29.X:only-of-type
li:only-of-type { font-weight: bold;}
與:only-child類似。

30.X:first-of-type
ul:first-of-type{font-weight: bold;} 
等價(jià)于:nth-of-type(1)，匹配集合元素中的第一個(gè)元素。

 
本文版權(quán)歸傳智播客Java培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客Java培訓(xùn)學(xué)院
首發(fā)：http://www.xamj520.com/javaee