                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /HTML5和CSS3扁平化風(fēng)格博客

：nth-child用的表現(xiàn)與標(biāo)準(zhǔn)不一樣

：nth-child這個(gè)方法怎么用的和標(biāo)準(zhǔn)不一樣，F(xiàn)irefox瀏覽器

mjkb123456

2015-11-27

源自：HTML5和CSS3扁平化風(fēng)格博客 3-6

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

1069

操作

收起

3 回答

echo_kinchao
2015-11-28

是一樣的 ?你的結(jié)構(gòu)沒(méi)寫(xiě)對(duì)而已

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

收起回答

proto
2015-11-27

:nth-child 這個(gè)選擇器實(shí)際上是根據(jù)被選中元素的父元素進(jìn)行匹配和選擇的，比如：

<div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
</div>
css代碼：
p:nth-child(?){background：red;}//給選中的標(biāo)簽加個(gè)紅背景，要求你選擇p1

那么問(wèn)題來(lái)了，你覺(jué)得括號(hào)里的問(wèn)號(hào)應(yīng)該寫(xiě)1還是2呢？

如果選1你就圖樣了

因?yàn)椋簄th-child這個(gè)選擇器的選擇過(guò)程是進(jìn)行一個(gè)匹配的，比如你選擇了p:nth-child（1），渲染的時(shí)候?yàn)g覽器首先會(huì)鎖定p標(biāo)簽的父標(biāo)簽，即div，然后檢查div下的第一個(gè)child標(biāo)簽，發(fā)現(xiàn)它不是p，這個(gè)跟p：nth-child(1)就匹配不上了，結(jié)果就是啥也沒(méi)選上；

但是如果寫(xiě)p:nth-child(2)的話，鎖定p的父標(biāo)簽div，檢查div下的第二個(gè)child標(biāo)簽，發(fā)現(xiàn)是p，匹配上了，就成功選擇上了。