                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /十天精通CSS3

first-child不懂

如圖所示，我要寫(xiě)成ul li:first-child{background:red;},第一行就變成紅色。如果寫(xiě)成ul:first-child{background:red;},第一行就沒(méi)變化？在這里面，ul不是父元素嗎？這”ul:first-child“不是表示它的第一個(gè)子元素嗎？為什么沒(méi)作用呢？

天窗的螞蟻

2016-01-03

源自：十天精通CSS3 6-6

關(guān)注問(wèn)題我要回答

1045

操作

收起

3 回答

李曉健回答被采納 +3 積分
2016-01-03

后代選擇器是有空格的 ?ul li:first-child 拆開(kāi)來(lái)看 ?ul是選擇頁(yè)面所有的ul標(biāo)簽 ?ul li是選擇ul下面的所有l(wèi)i標(biāo)簽 ?ul li:first-child是ul中所有l(wèi)i中的第一個(gè)，再來(lái)看?ul:first-child ? 一樣拆開(kāi)來(lái)看 ul是選擇頁(yè)面所有的ul標(biāo)簽?ul:first-child是選擇所有ul中的第一個(gè)ul，所以這里選擇到的是ul標(biāo)簽而不是li標(biāo)簽。

2 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

天窗的螞蟻提問(wèn)者

<div> 慕課網(wǎng) 慕課網(wǎng) 慕課網(wǎng) 慕課網(wǎng) 慕課網(wǎng) 慕課網(wǎng) </div> 那這里面，div span:first-child是不是表示div中所有span中的第一個(gè)呢？但是這樣有不對(duì)，得寫(xiě)成div span:nth-child(4)才行。還是有點(diǎn)迷糊

2016-01-03 回復(fù) 有任何疑惑可以回復(fù)我~

#2

李曉健回復(fù) 天窗的螞蟻提問(wèn)者

選擇器需要所有條件同時(shí)滿足才行，div span:first-child 你這個(gè)選擇器 div span會(huì)選中div下所有的span標(biāo)簽，然后你又在span上加了一個(gè)first-child 的限制，這些span沒(méi)有一個(gè)中div的第一個(gè)子元素，所以就不會(huì)選中任何元素了。而div span:nth-child(4) 這個(gè)選擇器中第一個(gè)span即是div的子元素，又是div中的第4個(gè)子元素，所以就可以選中了。

2016-01-03 回復(fù) 有任何疑惑可以回復(fù)我~

#3

天窗的螞蟻提問(wèn)者

非常感謝！

2016-01-04 回復(fù) 有任何疑惑可以回復(fù)我~