w3cSCHOOL上发现一个html5问题，用p:nth-child(1)没效果，而换成2则选择了第一个
//为什么会这样？这和解释对不上啊
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(1)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>
黄志明浏览 2460回答 5
5回答
-
qq_驰兮_0
这和解释没矛盾啊，nth-child是按子元素来取的，要取特定的子元素要用nth-of-type,正解是：p:nth-of-type(1){ background: red;} -
qq_慕前端5486108
:nth-child（n）类似的这种带:的选择器 :后为条件，前面的部分才表达的是你要选的元素，读的时候为：选择子元素为（nth-child这种的）/标签为（nth-of-type这种的）xxx（:前面的那部分）。 例：div#div1 p>:nth-child(n){} 为 选择子元素为idw为div1的div后代元素p下的子元素的子元素 -
海天鹰
我也发现了，我把源码保存为文件试了一下，Firefox和Chrome表现一样，只有一个解释：nth-child：h=p！ -
侠客岛的含笑
规定属于其父元素的第二个子元素的每个 p 的背景色：p:nth-child(2){background:#ff0000;}w3c这样说的
随时随地看视频慕课网APP
相关分类
Html5