CSS3中新增了幾個子元素選擇器，大大提高了開發者的開發效率。之前有些要通過為一個個子元素添加class，或者js實現才能實現的效果。現在可以很方便的用選擇器實現。

這些新的樣式已被現代瀏覽器及IE9以上支持。

選擇器? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明

:first-child? ? ? ? ? ? ? ? ? ? ? ? ?第一個子元素

:last-child? ? ? ? ? ? ? ? ? ? ? ? ?最后一個子元素

:nth-child(3)? ? ? ? ? ? ? ? ? ? ? ? ?第三個子元素

:nth-last-child(3) ? ? ? ? ? ? ? ? ?倒數第三個子元素

:nth-child(odd)? ? ? ? ? ? ? ? ?所有奇數個子元素

:nth-child(even)? ? ? ? ? ? ? ? ?所有偶數個子元素

div h2:nth-of-type(even)div? ? 中所有的h2元素中，所有的偶數元素(只針對同類型子元素計算)

:nth-last-of-type? ? ? ? ? ? ? ? ?反過來計算

li:nth-child(4n+1)? ? ? ? ? ? ? ? ?循環樣式 匹配第1，5，9...個li

li:nth-child(4n+2)? ? ? ? ? ? ? ? ?循環樣式 匹配第2，6，10...個li

li:nth-child(4n+4)? ? ? ? ? ? ? ? ?可簡寫為 li:nth-child(4n)

ul li:first-child:last-child? ? ? ? ?是第一個也是最后一個，即匹配ul中只有一個li.

:only-child? ? ? ? ? ? ? ? ? ? ? ?上面的簡寫形式。匹配某個父元素只有一個子元素

h2:nth-child(3) 與 h2:nth-of-type(3) 的區別？

h2:nth-child(3) 指 第三個子元素中正好是h2則應用該樣式

h2:nth-of-type(3) 指所有的h2子元素的合集中，對第三個h2應用該樣式html>

/*選擇的是#hd里第一個p標簽*/

#hd?p:first-of-type{

color:?blue;

font-size:?25px;

}

/*選擇的是#hd里最后一個p標簽*/

/*#hd?p:last-of-type{

color:?purple;

font-size:?25px;

}*/

/*如果div中只有一個p標簽,就選中這個p標簽(div可以有其它兄弟元素)*/

/*div?p:only-of-type{

color:?orange;

font-size:?25px;

}*/

/*選擇的是div中獨生子的(要求這個p標簽沒有任何兄弟元素)p標簽*/

/*div?p:only-child{

color:?orange;

font-size:?25px;

}*/

/*選擇的是div中第3個元素，并且要求第3個元素是p標簽可以選中(如果第三個標簽不是p標簽選不中的)*/

/*div?p:nth-child(3){

color:?red;

font-size:?25px;

}*/

/*選擇的是div中倒數第6個元素，并要求....*/

/*div?p:nth-last-child(6){

color:?orange;

font-size:60px;

}*/

/*選擇的是div中第4個的p標簽*/

/*div?p:nth-of-type(4){

color:?red;

font-size:?26px;

}*/

/*選擇的是div中倒數第2個的p標簽*/

/*div?p:nth-last-of-type(2){

color:?red;

font-size:?26px;

}*/

/*選擇的是每個div里第一個span標簽,并且要求第一個標簽符合冒號前面的選擇器的要求(簡單說就是每個div第一個span標簽)*/

div?span:first-child{

color:?blue;

font-size:?26px;

}

/*選擇的是每個div里最后一個p標簽*/

div?p:last-child{

color:?orange;

font-size:?26px;

}

這個是psan標簽里的內容

科比支持湖人交易濃眉：湖人這3人遠不如他01

特雷楊：今年新秀都很出色?但我才是最好的一個02

廣廈險勝浙江扳平總比分?胡金秋狂砍34+1603

網友調侃詹皇被封蓋?34歲的他真的老了？04

綜述：諾天王得分超張大帥?馬刺擊敗勇士取九連勝05

巴薩欲賤賣1.6億帝星?曼聯出1億歐就能帶走這位全能攻擊手06

美股高開低走終結四連漲?AMD大漲近12%07

如何把蒼白的人生包裝成牛逼閃閃的簡歷？08

對于小Z的吐槽，我已經司空見慣了09

666666span

但是小Z進組以后發現他們對前端自動化沒有什么了解

用vue的頁面仔還是頁面仔，哈哈~

用vue的頁面仔還是頁面仔，哈哈~

總結

以上是生活随笔為你收集整理的html 子级选择器,css3子选择器（选择某个标签做内容）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。