：nth-child用的表现与标准不一样
：nth-child这个方法怎么用的和标准不一样，Firefox浏览器
mjkb123456
2015-11-27
3 回答
:nth-child 这个选择器实际上是根据被选中元素的父元素进行匹配和选择的，比如：
<div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
</div>
css代码：
p:nth-child(?){background：red;}//给选中的标签加个红背景，要求你选择p1那么问题来了，你觉得括号里的问号应该写1还是2呢？
如果选1你就图样了
因为：nth-child这个选择器的选择过程是进行一个匹配的，比如你选择了p:nth-child（1），渲染的时候浏览器首先会锁定p标签的父标签，即div，然后检查div下的第一个child标签，发现它不是p，这个跟p：nth-child(1)就匹配不上了，结果就是啥也没选上；
但是如果写p:nth-child(2)的话，锁定p的父标签div，检查div下的第二个child标签，发现是p，匹配上了，就成功选择上了。
举报
0/150
提交
取消
