请教下面这个怎么解释？
<div class="first">
<div class="second">
<h1 class="third">
<p>1</p>
</h1>
<p>2</p>
</div>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
CSS样式为p:nth-child(2n+1){color:red;}
结果1和4变红，其他不变，怎么解释？
1 回答
刚想到一个解释，<div class="first”>作父元素，子元素有“second” p3 p4 p5(希望你们看得懂)，符合2n+1的位置的是“second”和p4，由于选的是p元素，所以这一选择中p4变红，second不变；
<div class="second">作父元素，子元素有h1和p2，p2不在2n+1的位置上，故两个都不变；
<h1 class="third">做父元素，子元素有p1，在2n+1的位置上，变红。
是这样吗？我都怀疑我是不是真的理解父元素的意思了。
还找到了p:nth-child(2n+1){color:red；}和p:nth-of type(2n+1){color:red;}的区别，前者先找2n+1的位置再找p，后者先找p在找2n+1的位置；
举报
0/150
提交
取消
