CSS常用的選擇器

對(duì)大多技術(shù)人員來(lái)說(shuō)都比較熟悉 CSS 選擇器，舉一例子來(lái)說(shuō)骨宠，假設(shè)給一個(gè) p 標(biāo)簽增加一個(gè)類（class）边酒，可是執(zhí)行后該 class 中的有些屬性并沒(méi)有起作用揽涮。通過(guò) Firebug 查看，發(fā)現(xiàn)沒(méi)有起作用的屬性被覆蓋了阴幌，這個(gè)時(shí)候突然意識(shí)到了 CSS 選擇器的優(yōu)先級(jí)問(wèn)題勺阐。嚴(yán)格來(lái)講，選擇器的種類可以分為三種：標(biāo)簽名選擇器矛双、類選擇器和ID選擇器皆看。而所謂的后代選擇器和群組選擇器只不過(guò)是對(duì)前三種選擇器的擴(kuò)展應(yīng)用。而在標(biāo)簽內(nèi)寫入 style="" 的方式背零，應(yīng)該是 CSS 的一種引入方式腰吟，而不是選擇器，因?yàn)楦揪蜎](méi)有用到選擇器徙瓶。而一般人們將上面這幾種方式結(jié)合在一起毛雇，所以就有了5種或6種選擇器了。

最基本的選擇器是元素選擇器(比如 div),ID 選擇器(比如 #header)還有類選擇器(比如.tweet)侦镇。

一些的不常見的選擇器包括偽類選擇器(:hover)灵疮，很多復(fù)雜的 CSS3 和正則選擇器，比如：first-child壳繁，class ^= “grid-”震捣。CSS選擇器具有高效的繼承性，引用 Steve Souders 的話闹炉， CSS 選擇器效率從高到低的排序如下：

選擇器 用法
id選擇器 #myid
類選擇器 .myclassname
標(biāo)簽選擇器 div,h1,p
相鄰選擇器 h1+p
子選擇器 ul > li
后代選擇器 li a
通配符選擇器 *
屬性選擇器 a[rel="external"]
偽類選擇器 a:hover, li:nth-child

縱使ID選擇器很快蒿赢、高效，但是它也僅僅如此渣触。從 Steve Souders 的 CSS Test 我們可以看出ID選擇器和類選擇器在速度上的差異很小很小羡棵。

在 Windows 系統(tǒng)上的 Firefox 6 上，我測(cè)得了一個(gè)簡(jiǎn)單類選擇器的（reflow figure）重繪速度為 10.9ms嗅钻，而ID選擇器為 12.5ms皂冰，所以事實(shí)上ID比類選擇器重繪要慢一點(diǎn)點(diǎn)。

ID選擇器和類選擇器在速度上的差異基本上沒(méi)有關(guān)系养篓。

在一個(gè)標(biāo)簽選擇器(a)的測(cè)試上顯示秃流，它比類或ID選擇器的速度慢了很多。在一個(gè)嵌套很深的后代選擇器的測(cè)試上柳弄，顯示數(shù)據(jù)為440左右舶胀！從這里我們可以看出ID/類選擇器 和 元素/后代選擇器中間的差異較大，但是相互之間的差異較小。

選擇器的優(yōu)先級(jí)是怎么規(guī)定的呢峻贮？

一般而言席怪，選擇器越特殊，它的優(yōu)先級(jí)越高纤控。也就是選擇器指向的越準(zhǔn)確挂捻，它的優(yōu)先級(jí)就越高。通常我們用1表示標(biāo)簽名選擇器的優(yōu)先級(jí)船万，用10表示類選擇器的優(yōu)先級(jí)刻撒，用 100 標(biāo)示 ID選擇器的優(yōu)先級(jí)。比如上例當(dāng)中 .polaris span {color:red;}的選擇器優(yōu)先級(jí)是 10 + 1 也就是11耿导；而.polaris的優(yōu)先級(jí)是10感挥；瀏覽器自然會(huì)顯示紅色的字螃壤。理解了這個(gè)道理之后下面的優(yōu)先級(jí)計(jì)算自是易如反掌：

div.test1 .span var 優(yōu)先級(jí) 1+10 +10 +1

span#xxx .songs li 優(yōu)先級(jí)1+100 + 10 + 1

#xxx li 優(yōu)先級(jí) 100 + 1

對(duì)于什么情況下使用什么選擇器，用不同選擇器的原則是：

  1. 準(zhǔn)確的選到要控制的標(biāo)簽；
  2. 使用最合理優(yōu)先級(jí)的選擇器瘟栖；
  3. HTML 和 CSS 代碼盡量簡(jiǎn)潔美觀菠赚。通常：

①最常用的選擇器是類選擇器荣病。

②li舟茶、td、dd等經(jīng)常大量連續(xù)出現(xiàn)茬高，并且樣式相同或者相類似的標(biāo)簽兆旬，我們采用類選擇器跟標(biāo)簽名選擇器結(jié)合的后代選擇器 .xx li/td/dd {} 的方式選擇。

③極少的情況下會(huì)用 ID 選擇器怎栽，當(dāng)然很多前端開發(fā)人員喜歡 header丽猬，footer，banner熏瞄，conntent 設(shè)置成 ID 選擇器的脚祟，因?yàn)橄嗤臉邮皆谝粋€(gè)頁(yè)面里不可能有第二次。

在這里不得不提使用在標(biāo)簽內(nèi)引入 CSS 的方式來(lái)寫 CSS巴刻，即：

<div style="color:red">polaris</div>

這時(shí)候的優(yōu)先級(jí)是最高的愚铡。我們給它的優(yōu)先級(jí)是 1000，這種寫法不推薦使用胡陪，特別是對(duì)新手來(lái)說(shuō)。這也完全違背了內(nèi)容和顯示分離的思想碍舍。DIV+CSS 的優(yōu)點(diǎn)也不能再有任何體現(xiàn)柠座。

怎么提升CSS選擇器性能？

1片橡、避免使用通用選擇器

.content {color: red;}

瀏覽器匹配文檔中所有的元素后分別向上逐級(jí)匹配 class 為 content 的元素妈经，直到文檔的根節(jié)點(diǎn)。因此其匹配開銷是非常大的，所以應(yīng)避免使用關(guān)鍵選擇器是通配選擇器的情況吹泡。

2骤星、避免使用標(biāo)簽或 class 選擇器限制 id 選擇器

避免使用

button#backButton {…}

避免使用

.menu-left#newMenuIcon {…}

推薦使用

#backButton {…}

推薦使用

#newMenuIcon {…}

3、避免使用標(biāo)簽限制 class 選擇器

避免使用

treecell.indented {…}

推薦使用

.treecell-indented {…}

最優(yōu)使用

.hierarchy-deep {…}

4爆哑、避免使用多層標(biāo)簽選擇器洞难。使用 class 選擇器替換，減少 css 查找

避免使用

treeitem[mailfolder="true"] > treerow > treecell {…}

推薦使用

.treecell-mailfolder {…}

5揭朝、避免使用子選擇器

避免使用

treehead treerow treecell {…}

BETTER, BUT STILL BAD 

treehead > treerow > treecell {…}

推薦使用

.treecell-header {…}

6队贱、使用繼承

避免使用

#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }

推薦使用

#bookmarkMenuItem { list-style-image: url(blah) }

簡(jiǎn)潔、高效的CSS

所謂高效的 CSS 就是讓瀏覽器在查找 style 匹配的元素的時(shí)候盡量進(jìn)行少的查找潭袱，下面列出一些我們常見的寫 CSS 犯一些低效錯(cuò)誤：

高效的CSS

不要在ID選擇器前使用標(biāo)簽名

一般寫法：DIV#divBox

更好寫法：#divBox

解釋： 因?yàn)镮D選擇器是唯一的柱嫌，加上 div 反而增加不必要的匹配。

不要再class選擇器前使用標(biāo)簽名

一般寫法：span.red

更好寫法：.red

解釋：同第一條屯换，但如果你定義了多個(gè) .red编丘，而且在不同的元素下是樣式不一樣，則不能去掉彤悔，比如你 CSS 文件中定義如下：

p.red{color:red;}

span.red{color:#ff00ff}

如果是這樣定義的就不要去掉瘪吏，去掉后就會(huì)混淆，不過(guò)建議最好不要這樣寫

盡量少使用層級(jí)關(guān)系

一般寫法：#divBox p .red{color:red;}

更好寫法：.red{..}

使用class代替層級(jí)關(guān)系

一般寫法：#divBox ul li a{display:block;}

更好寫法：.block{display:block;}

必須記住的30類CSS選擇器

大概大家都知道“id”,“class”以及“descendant”選擇器蜗巧，并且整體都在使用它們掌眠，那么你正在錯(cuò)誤擁有更大級(jí)別的靈活性的選擇方式。下面提到的大部分選擇器都是在CSS3標(biāo)準(zhǔn)下的幕屹，所以它們只能在相應(yīng)最新版本的瀏覽器中才能生效蓝丙，你完全應(yīng)該把這些都記在你聰明的腦袋里面。

1.*

*{

margin: 0;

padding: 0;}

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

#container * {

border: 1px solid black;}

它會(huì)選中 #container 下的所有元素。當(dāng)然架诞，我還是不建議你去使用它拟淮，如果可能的話。

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

#container {

width: 960px;

margin: auto;}

在選擇器中使用#可以用 id 來(lái)定位某個(gè)元素谴忧。大家通常都會(huì)這么使用很泊，然后使用的時(shí)候大家還是得相當(dāng)小心的角虫。需要問(wèn)自己一下：我是不是必須要給這個(gè)元素來(lái)賦值個(gè) id 來(lái)定位它呢？

id選擇器是很嚴(yán)格的并且你沒(méi)辦法去復(fù)用它委造。如果可能的話戳鹅，首先試試用標(biāo)簽名字，HTML5中的新元素昏兆，或者是偽類枫虏。

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

.error {

color: red;}

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

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

li a {

text-decoration: none;}

下一個(gè)常用的就是 descendant 選擇器燃异。如果你想更加具體的去定位元素，你可以使用它继蜡。例如回俐，假如，你不需要定位所有的 a 元素稀并，而只需要定位li標(biāo)簽下的 a 標(biāo)簽仅颇？這時(shí)候你就需要使用 descendant 選擇器了。

專家提示：如果你的選擇器像 X Y Z A B.error 這樣碘举，那你就錯(cuò)了忘瓦。時(shí)刻都提醒自己，是否真的需要對(duì)那么多元素修飾引颈。

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

a { color: red; }

ul { margin-left: 0; }

如果你想定位頁(yè)面上所有的某標(biāo)簽耕皮，不是通過(guò)id或者是‘class’，這簡(jiǎn)單蝙场，直接使用類型選擇器凌停。

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited and X:link

a:link {color:red;}

a:visited {color: purple;}

我們使用:link這個(gè)偽類來(lái)定位所有還沒(méi)有被訪問(wèn)過(guò)的鏈接。

另外售滤，我們也使用:visited來(lái)定位所有已經(jīng)被訪問(wèn)過(guò)的鏈接罚拟。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X+Y

ul + p {

color: red;}

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

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X>Y

div#container > ul {

border: 1px solid black;}

X Y 和 X > Y的差別就是后面這個(gè)指揮選擇它的直接子元素嗜憔⊥豪看下面的例子：

<div id="container">

<ul><li> List Item

<ul><li> Child </li>

</ul></li><li> List Item </li><li> List Item </li><li> List Item </li></ul>

</div>

#container > ul只會(huì)選中id為‘container’的div下的所有直接ul元素。它不會(huì)定位到如第一個(gè) li 下的 ul 元素吉捶。

由于某些原因夺鲜，使用子節(jié)點(diǎn)組合選擇器會(huì)在性能上有許多的優(yōu)勢(shì)。事實(shí)上呐舔，當(dāng)在 javascript 中使用 css 選擇器時(shí)候是強(qiáng)烈建議這么做的币励。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

ul ~ p {

color: red;}

兄弟節(jié)點(diǎn)組合選擇器跟 X+Y 很相似，然后它又不是那么的嚴(yán)格珊拼。ul + p選擇器只會(huì)選擇緊挨跟著指定元素的那些元素食呻。而這個(gè)選擇器，會(huì)選擇跟在目標(biāo)元素后面的所有匹配的元素澎现。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

a[title] {

 color: green;}

這個(gè)叫屬性選擇器仅胞，上面的這個(gè)例子中，只會(huì)選擇有title屬性的元素剑辫。那些沒(méi)有此屬性的錨點(diǎn)標(biāo)簽將不會(huì)被這個(gè)代碼修飾干旧。那再想想如果你想更加具體的去篩選？那…

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href="foo"]

a[ rel="external nofollow" target="_blank" ] {
color: #1f6053; /* nettuts green */}

上面這片代碼將會(huì)把 href 屬性值為[http://strongme.cn](http://strongme.cn/)的錨點(diǎn)標(biāo)簽設(shè)置為綠色妹蔽，而其他標(biāo)簽則不受影響椎眯。

注意我們將值用雙引號(hào)括起來(lái)了。那么在使用 Javascript 的時(shí)候也要使用雙引號(hào)括起來(lái)胳岂”嗾可以的話，盡量使用標(biāo)準(zhǔn)的 CSS3 選擇器乳丰。

這樣可以用了掌测，但是還是有點(diǎn)死，如果不是這個(gè)鏈接产园，而是類似的鏈接汞斧，那么這時(shí)就得用正則表達(dá)式了。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href="strongme"]

a[href="strongme"] {

color: #1f6053;}

Tada,正是我們需要的淆两，這樣断箫，就指定了strongme這個(gè)值必須出現(xiàn)在錨點(diǎn)標(biāo)簽的href屬性中，不管是strongme.cn還是strongme.com還是www.strongme.cn都可以被選中秋冰。
但是記得這是個(gè)很寬泛的表達(dá)方式仲义。如果錨點(diǎn)標(biāo)簽指向的不是strongme相關(guān)的站點(diǎn)，如果要更加具體的限制的話剑勾，那就使用^和$埃撵，分別表示字符串的開始和結(jié)束。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

13. X[href^="href"]

a[href^="http"] {

background: url(path/to/external/icon.png) no-repeat;

padding-left: 10px; }

大家肯定好奇過(guò)虽另，有些站點(diǎn)的錨點(diǎn)標(biāo)簽旁邊會(huì)有一個(gè)外鏈圖標(biāo)暂刘，我也相信大家肯定見過(guò)這種情況。這樣的設(shè)計(jì)會(huì)很明確的告訴你會(huì)跳轉(zhuǎn)到別的網(wǎng)站捂刺。
用克拉符號(hào)就可以輕易做到谣拣。它通常使用在正則表達(dá)式中標(biāo)識(shí)開頭募寨。如果我們想定位錨點(diǎn)屬性href中以http開頭的標(biāo)簽，那我們就可以用與上面相似的代碼森缠。

注意我們沒(méi)有搜索?http://?拔鹰，那是沒(méi)必要的，因?yàn)樗疾话?https://?贵涵。

那如果我們想找到所有指向一張圖片的錨點(diǎn)標(biāo)簽?zāi)亓兄磕俏覀儊?lái)使用下&字符。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

14. X[href$=".jpg"]

a[href$=".jpg"] {

color: red; }

這次我們又使用了正則表達(dá)式$宾茂，表示字符串的結(jié)尾處瓷马。這段代碼的意思就是去搜索所有的圖片鏈接，或者其它鏈接是以.jpg結(jié)尾的跨晴。但是記住這種寫法是不會(huì)對(duì)gifs和pngs起作用的欧聘。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

15. X[data-*="foo"]

a[data-filetype="image"] {

color: red;}

在回到第8條，我們?nèi)绾伟阉械膱D片類型都選中呢png,jpeg,’?jpg?’,'?gif?’坟奥？我們可以使用多選擇器树瞭。看下面：

a[href$=".jpg"],

a[href$=".jpeg"],

a[href$=".png"],

a[href$=".gif"] {

color: red; }

但是這樣寫著很蛋疼啊爱谁，而且效率會(huì)很低晒喷。另外一個(gè)辦法就是使用自定義屬性。我們可以給每個(gè)錨點(diǎn)加個(gè)屬性data-filetype指定這個(gè)鏈接指向的圖片類型访敌。
[html]
Image Link 那有了這個(gè)鉤子凉敲，我們就可以去用標(biāo)準(zhǔn)的辦法只去選定文件類型為image的錨點(diǎn)了。

a[data-filetype="image"] {

color: red; }

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

16. X[foo~="bar"]

a[data-info~="external"] {

color: red; }

a[data-info~="image"] {

border: 1px solid black; }

這個(gè)我想會(huì)讓你的小伙伴驚呼妙極了寺旺。很少有人知道這個(gè)技巧爷抓。這個(gè)~符號(hào)可以定位那些某屬性值是空格分隔多值的標(biāo)簽。
繼續(xù)使用第15條那個(gè)例子阻塑，我們可以設(shè)置一個(gè)data-info屬性蓝撇，它可以用來(lái)設(shè)置任何我們需要的空格分隔的值。這個(gè)例子我們將指示它們?yōu)橥獠窟B接和圖片鏈接陈莽。

Click Me, Fool

給這些元素設(shè)置了這個(gè)標(biāo)志之后渤昌，我們就可以使用~來(lái)定位這些標(biāo)簽了。

/ Target data-info attr that contains the value "external" /

a[data-info~="external"] {

color: red;}

/ And which contain the value "image" /

a[data-info~="image"] {

border: 1px solid black;}

17. X:checked

input[type=radio]:checked {

border: 1px solid black; }

上面這個(gè)偽類寫法可以定位那些被選中的單選框和多選框走搁，就是這么簡(jiǎn)單独柑。

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

18. X:after

before和after這倆偽類。好像每天大家都能找到使用它們的創(chuàng)造性方法私植。它們會(huì)在被選中的標(biāo)簽周圍生成一些內(nèi)容忌栅。
當(dāng)使用.clear-fix技巧時(shí)許多屬性都是第一次被使用到里面的。

.clearfix:after {

    content: "";

    display: block;

    clear: both;

    visibility: hidden;

    font-size: 0;

    height: 0;

  }

.clearfix { 

   display: inline-block; 

   _height: 1%;

}

上面這段代碼會(huì)在目標(biāo)標(biāo)簽后面補(bǔ)上一段空白曲稼，然后將它清除索绪。這個(gè)方法你一定得放你的聚寶盆里面湖员。特別是當(dāng)overflow:hidden方法不頂用的時(shí)候，這招就特別管用了者春。

根據(jù) CSS3 標(biāo)準(zhǔn)規(guī)定破衔，可以使用兩個(gè)冒號(hào)::清女。然后為了兼容性钱烟，瀏覽器也會(huì)接受一個(gè)雙引號(hào)的寫法。其實(shí)在這個(gè)情況下嫡丙，用一個(gè)冒號(hào)還是比較明智的拴袭。

兼容性

  • IE8+

  • Firefox

  • Chrome

  • Safari

  • Opera

19. X:hover

div:hover {

background: #e3e3e3; }

不用說(shuō)，大家肯定知道它曙博。官方的說(shuō)法是user action pseudo class.聽起來(lái)有點(diǎn)兒迷糊拥刻，其實(shí)還好。如果想在用戶鼠標(biāo)飄過(guò)的地方涂點(diǎn)兒彩父泳，那這個(gè)偽類寫法可以辦到般哼。

注意舊版本的IE只會(huì)對(duì)加在錨點(diǎn)a標(biāo)簽上的:hover偽類起作用。

通常大家在鼠標(biāo)飄過(guò)錨點(diǎn)鏈接時(shí)候加下邊框的時(shí)候用到它惠窄。

a:hover {

 border-bottom: 1px solid black;

}

專家提示：?border-bottom:1px solid black?;比?text-decoration:underline?;要好看很多蒸眠。

兼容性

  • IE6+(IE6只能在錨點(diǎn)標(biāo)簽上起作用)

  • Firefox

  • Chrome

  • Safari

  • Opera

20. X:not(selector)

div:not(#container) {

   color: blue;

}

取反偽類是相當(dāng)有用的，假設(shè)我們要把除id為container之外的所有div標(biāo)簽都選中杆融。那上面那么代碼就可以做到楞卡。

或者說(shuō)我想選中所有出段落標(biāo)簽之外的所有標(biāo)簽。

:not(p) {

  color: green;

}

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

21. X::pseudoElement

p : : first-line {

  font-weight: bold;

  font-size:1.2em;

}

我們可以使用::來(lái)選中某標(biāo)簽的部分內(nèi)容脾歇，如第一段蒋腮，或者是第一個(gè)字沒(méi)有。但是記得必須使用在塊式標(biāo)簽上才起作用藕各。

偽標(biāo)簽是由兩個(gè)冒號(hào) ?::? 組成的池摧。

定位第一個(gè)字

p::first-letter {

   float: left;

   font-size: 2em;

   font-weight: bold;

   font-family: cursive;

   padding-right: 2px;

}

上面這段代碼會(huì)找到頁(yè)面上所有段落，并且指定為每一段的第一個(gè)字激况。

它通常在一些新聞報(bào)刊內(nèi)容的重點(diǎn)突出會(huì)使用到作彤。

定位某段的第一行

p::first-line {

   font-weight: bold;

   font-size: 1.2em;

}

跟::first-line相似，會(huì)選中段落的第一行 誉碴。

為了兼容性宦棺，之前舊版瀏覽器也會(huì)兼容單冒號(hào)的寫法，例如:first-line,:first-letter,:before,:after.但是這個(gè)兼容對(duì)新介紹的特性不起作用黔帕。

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

22. X:nth-child(n)

li:nth-child(3) {

   color: red;

}

還記得我們面對(duì)如何取到推跌式標(biāo)簽的第幾個(gè)元素是無(wú)處下手的時(shí)光么代咸，有了nth-child那日子就一去不復(fù)返了。

請(qǐng)注意nth-child接受一個(gè)整形參數(shù)成黄，然后它不是從0開始的呐芥。如果你想獲取第二個(gè)元素那么你傳的值就是li:nth-child(2).

我們甚至可以獲取到由變量名定義的個(gè)數(shù)個(gè)子標(biāo)簽逻杖。例如我們可以用li:nth-child(4n)去每隔3個(gè)元素獲取一次標(biāo)簽。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {

   color: red;

}

假設(shè)你在一個(gè)ul標(biāo)簽中有N多的元素思瘟，而你只想獲取最后三個(gè)元素荸百，甚至是這樣li:nth-child(397)，你可以用nth-last-child偽類去代替它滨攻。

這個(gè)技巧可以很正確的代替第16個(gè)TIP够话，不同的就是它是從結(jié)尾處開始的，倒回去的光绕。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

  • Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {

   border: 1px solid black;

}

曾幾何時(shí)女嘲，我們不想去選擇子節(jié)點(diǎn)，而是想根據(jù)元素的類型來(lái)進(jìn)行選擇诞帐。

想象一下有5個(gè)ul標(biāo)簽欣尼。如果你只想對(duì)其中的第三個(gè)進(jìn)行修飾，而且你也不想使用id屬性停蕉，那你就可以使用nth-of-type(n)偽類來(lái)實(shí)現(xiàn)了愕鼓，上面的那個(gè)代碼，只有第三個(gè)ul標(biāo)簽會(huì)被設(shè)置邊框慧起。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {

   border: 1px solid black;

}

同樣菇晃，也可以類似的使用nth-last-of-type來(lái)倒序的獲取標(biāo)簽。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

  • Opera

26. X:first-child

ul li:first-child {

   border-top: none;

}

這個(gè)結(jié)構(gòu)性的偽類可以選擇到第一個(gè)子標(biāo)簽完慧，你會(huì)經(jīng)常使用它來(lái)取出第一個(gè)和最后一個(gè)的邊框谋旦。

假設(shè)有個(gè)列表，每個(gè)標(biāo)簽都有上下邊框屈尼，那么效果就是第一個(gè)和最后一個(gè)就會(huì)看起來(lái)有點(diǎn)奇怪册着。這時(shí)候就可以使用這個(gè)偽類來(lái)處理這種情況了。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

27. X:last-child

ul > li:last-child {

   color: green;

}

跟first-child相反脾歧，last-child取的是父標(biāo)簽的最后一個(gè)標(biāo)簽甲捏。

例如
標(biāo)簽

 List Item    

 List Item 

 List Item

這里沒(méi)啥內(nèi)容，就是一個(gè)了 List鞭执。

ul {

 width: 200px;

 background: #292929;

 color: white;

 list-style: none;

 padding-left: 0;

}

li {

 padding: 10px;

 border-bottom: 1px solid black;

 border-top: 1px solid #3c3c3c;

}

上面的代碼將設(shè)置背景色司顿，移除瀏覽器默認(rèn)的內(nèi)邊距，為每個(gè)li設(shè)置邊框以凸顯一定的深度兄纺。

背景色

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

28. X:only-child

div p:only-child {

   color: red;

}

說(shuō)實(shí)話大溜，你會(huì)發(fā)現(xiàn)你幾乎都不會(huì)用到這個(gè)偽類。然而估脆，它是可用的钦奋，有會(huì)需要它的。

它允許你獲取到那些只有一個(gè)子標(biāo)簽的父標(biāo)簽。就像上面那段代碼付材，只有一個(gè)段落標(biāo)簽的div才被著色朦拖。

 My paragraph here. 

 Two paragraphs total. 

 Two paragraphs total.

上面例子中，第二個(gè)div不會(huì)被選中厌衔。一旦第一個(gè)div有了多個(gè)子段落璧帝，那這個(gè)就不再起作用了。

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

29. X:only-of-type

li:only-of-type {

   font-weight: bold;

}

結(jié)構(gòu)性偽類可以用的很聰明富寿。它會(huì)定位某標(biāo)簽只有一個(gè)子標(biāo)簽的目標(biāo)睬隶。設(shè)想你想獲取到只有一個(gè)子標(biāo)簽的ul標(biāo)簽？

使用ul li會(huì)選中所有li標(biāo)簽作喘。這時(shí)候就要使用only-of-type了理疙。

ul > li:only-of-type {

   font-weight: bold;

}

兼容性

  • IE9+

  • Firefox 3.5+

  • Chrome

  • Safari

  • Opera

30. X:first-of-type first-of-type

偽類可以選擇指定標(biāo)簽的第一個(gè)兄弟標(biāo)簽。

測(cè)試

My paragraph here.    

 List Item 1   

 List Item 2       

 List Item 3     

 List Item 4

來(lái)你把List Item 2取出來(lái)泞坦，如果你已經(jīng)取出來(lái)或者是放棄了，來(lái)繼續(xù)砖顷。

解決辦法1
辦法很多贰锁，我們看一些比較方便的。首先是first-of-type滤蝠。

ul:first-of-type > li:nth-child(2) {

   font-weight: bold;

}

找到第一個(gè)ul標(biāo)簽豌熄，然后找到直接子標(biāo)簽li，然后找到第二個(gè)子節(jié)點(diǎn)物咳。
解決辦法2
另一個(gè)解決辦法就是鄰近選擇器锣险。

p + ul li:last-child {

   font-weight: bold;

}

這種情況下，找到p下的直接ul標(biāo)簽览闰，然后找到它的最后一個(gè)直接子標(biāo)簽芯肤。

解決辦法3
我們可以隨便玩耍這些選擇器。來(lái)看看：

ul:first-of-type li:nth-last-child(1) {

   font-weight: bold;

}

先獲取到頁(yè)面上第一個(gè)ul標(biāo)簽压鉴，然后找到最后一個(gè)子標(biāo)簽崖咨。

兼容性

  • IE9+

  • Firefox 3.5+

  • Chrome

  • Safari

  • Opera

結(jié)論

我目前是在職前端開發(fā)，如果你現(xiàn)在也想學(xué)習(xí)前端開發(fā)技術(shù)油吭，在入門學(xué)習(xí)前端的過(guò)程當(dāng)中有遇見任何關(guān)于學(xué)習(xí)方法击蹲，學(xué)習(xí)路線，學(xué)習(xí)效率等方面的問(wèn)題婉宰，你都可以申請(qǐng)加入我所在的前端學(xué)習(xí)交流裙：前面是 4213 后面是 74697歌豺。里面聚集了一些正在自學(xué)前端的初學(xué)者,轉(zhuǎn)行者，初階者心包，我這里也有我做前端技術(shù)這段時(shí)間整理的一些前端學(xué)習(xí)思維導(dǎo)圖类咧，前端大廠面試題，前端開發(fā)源碼教程，PDF文檔書籍教程,需要的話都可以找裙豬獲取轮听。

如果你想向舊版本瀏覽器妥協(xié)骗露，比如IE6，那你用這些新的選擇器的時(shí)候還是得小心點(diǎn)血巍。但別讓IE6阻止你去學(xué)這些新的技能萧锉。那你就對(duì)自己太殘忍了。記得多查查兼容性列表述寡，或者使用Dean Edward's excellent IE9.js script 來(lái)讓你的瀏覽器具有這些特性柿隙。

第二個(gè)，使用向 jQuery 的時(shí)候鲫凶，盡量使用原生的 CSS3 選擇器禀崖。可能 活讓你的代碼跑的很快螟炫。這樣選擇器引擎就可以使用瀏覽器原生解析器波附，而不是選擇器自己的。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末昼钻，一起剝皮案震驚了整個(gè)濱河市掸屡，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌然评，老刑警劉巖仅财，帶你破解...
    沈念sama閱讀 218,525評(píng)論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異碗淌，居然都是意外死亡盏求，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門亿眠，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)碎罚，“玉大人，你說(shuō)我怎么就攤上這事缕探』昴” “怎么了？”我有些...
    開封第一講書人閱讀 164,862評(píng)論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵爹耗，是天一觀的道長(zhǎng)耙考。 經(jīng)常有香客問(wèn)我，道長(zhǎng)潭兽，這世上最難降的妖魔是什么倦始？ 我笑而不...
    開封第一講書人閱讀 58,728評(píng)論 1贊 294
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮山卦，結(jié)果婚禮上鞋邑，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好枚碗，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布逾一。 她就那樣靜靜地躺著，像睡著了一般肮雨。 火紅的嫁衣襯著肌膚如雪遵堵。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,590評(píng)論 1贊 305
  • 城市分裂傳說(shuō)
    那天怨规，我揣著相機(jī)與錄音陌宿，去河邊找鬼。 笑死波丰，一個(gè)胖子當(dāng)著我的面吹牛壳坪，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播掰烟，決...
    沈念sama閱讀 40,330評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼爽蝴，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了媚赖？” 一聲冷哼從身側(cè)響起霜瘪，我...
    開封第一講書人閱讀 39,244評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎惧磺，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捻撑，經(jīng)...
    沈念sama閱讀 45,693評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡磨隘，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了顾患。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片番捂。...
    茶點(diǎn)故事閱讀 40,001評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖江解，靈堂內(nèi)的尸體忽然破棺而出设预，到底是詐尸還是另有隱情，我是刑警寧澤犁河，帶...
    沈念sama閱讀 35,723評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布鳖枕，位于F島的核電站，受9級(jí)特大地震影響桨螺，放射性物質(zhì)發(fā)生泄漏宾符。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評(píng)論 3贊 330
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一灭翔、第九天 我趴在偏房一處隱蔽的房頂上張望魏烫。 院中可真熱鬧，春花似錦、人聲如沸哄褒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)呐赡。三九已至退客，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間罚舱，已是汗流浹背井辜。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評(píng)論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留管闷，地道東北人粥脚。 一個(gè)月前我還...
    沈念sama閱讀 48,191評(píng)論 3贊 370
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像包个，于是被迫代替她去往敵國(guó)和親刷允。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • 你也許已經(jīng)掌握了id碧囊、class树灶、后臺(tái)選擇器這些基本的css選擇器。但這遠(yuǎn)遠(yuǎn)不是css的全部糯而。下面向大家系統(tǒng)的解析...
    曲昶光閱讀 220評(píng)論 0贊 1
  • ————轉(zhuǎn)自W3Cschool天通，并經(jīng)過(guò)我自己整理而成———— 首先講一件很重要的事情，在CSS選擇器進(jìn)行元素定位的...
    Primers閱讀 415評(píng)論 0贊 0
  • 一诺祸、基本選擇器 回顧選擇器 通配符選擇器、元素選擇器祭芦、類選擇器筷笨、ID選擇器、后代選擇器 新增基本選擇器 子元素選擇...
    越IT閱讀 1,159評(píng)論 0贊 3
  • CSS的魅力就是讓我們前端工程師像設(shè)計(jì)師一樣進(jìn)行網(wǎng)頁(yè)的設(shè)計(jì)避矢，我們能輕而易舉的改變顏色悼瘾、布局囊榜、制作出漂亮的影音效果等...
    前端小咖閱讀 1,775評(píng)論 3贊 49
  • 一、基本選擇器 子元素選擇器 概念：子元素選擇器只能選擇某元素的子元素語(yǔ)法格式：父元素 > 子元素 （Father...
    Leophen閱讀 355評(píng)論 0贊 0