[分享]css偶数选择器不好使

CSS中的偶数选择器（:nthoftype(even)）通常用于选择父元素中的偶数子元素，但是你会发现有时候它并不灵验。 第一个元素 第二个元素 第三个元素 第四个元素 上述代码中，:nthof...

CSS中的偶数选择器（:nth-of-type(even)）通常用于选择父元素中的偶数子元素，但是你会发现有时候它并不灵验。

 <ul>
        <li>第一个元素</li>
        <li>第二个元素</li>
        <li>第三个元素</li>
        <li>第四个元素</li>
    </ul> 

上述代码中，:nth-of-type(even)可以正常选择到第2个和第4个元素。然而，如果我们在父元素中使用了其他元素，偶数选择器将会出现问题，如下面的代码所示：

 <div>
        <p>第一个元素</p>
        <p>第二个元素</p>
        <p>第三个元素</p>
        <p>第四个元素</p>
    </div> 

在这种情况下，:nth-of-type(even)将无法选择到任何一个元素。因为这个选择器只适用于相同类型的元素，而在div中包含了四个不同类型的元素(p)，所以这个选择器就不起作用了。

为了解决这个问题，我们可以使用其他选择器来代替偶数选择器。例如：:nth-child(2n)选择所有偶数元素，无论其类型是什么。另外，我们也可以考虑使用JavaScript来选择偶数元素。