解决:nth-child子元素中有别的标签不生效

:nth-child元素选择器很好用,比如:

<section>
<i>第1个i标签</i>
<i>第2个i标签</i>  <!-- 希望这个变色 -->
</section>

想要第二个i标签变色,就这样写:

i:nth-child(2) { color: red; }

但是有些例外情况会让这个标签失效,比如下边的例子:

<section>
    <div>我是一个普通的div标签</div>
    <i>第1个i标签</i>
    <i>第2个i标签</i>  <!-- 希望这个变色 -->
</section>

这样的情况会使:nth-child标签变得诡异起来,你希望第二个i标签变色,还用刚才的css写,会发现第一个i标签变色了,就是这么诡异,那遇见这种情况该怎么办呢?别急,用下边这个写法:

i:nth-of-type(2) { color: red; }

这样写就行了,把nth-child换成nth-of-type就行了,大胆试试吧。

这样写会出现另外一个问题,如果用class名来取的话,nth-of-type也取不到,比如:

.qwe:nth-of-type(1){color:red;}

此时标签也会失效,所以用的时候一定要根据实际情况进行调整,尽量避免用class类来获取。

以上就是解决:nth-child子元素中有别的标签不生效的方法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注