Question

我有一个元素列表，我想添加不同的颜色，具体取决于偶数/奇数BUT只有特殊类的元素。

<!DOCTYPE html>
<html>
  <head>
    <style> 
      p.class:nth-of-type(odd) {
       background: #ff0000 ;
      }

      p.class:nth-of-type(even) {
       background: #0000ff ;
      }
    </style>
  </head>
  <body>
    <p class="class">The first paragraph.</p>
    <p>The second paragraph.</p>
    <p class="class">The third paragraph.</p>
    <p class="class">The fourth paragraph.</p>
  </body>
</html>

我期望的结果是：

红色
正常
蓝色
红色

但真正的结果是：

红色
正常
红色
蓝色

感谢您的回答。

Answer 1

这是因为奇数/偶数是基于它相对于其父级的位置，而不是相对于其“喜欢”的div。给div分类是最有效的。

Answer 2

看起来你没有目标类，所以不管它是什么类，它都使用p标签作为类型（参见下面的链接）：

css3 nth of type restricted to class

Answer 3

如果您允许使用jQuery，我建议使用以下代码片段来设置奇数/偶数类。无论如何，您无法使用纯CSS执行此操作，如此处所述：css3 nth of type restricted to class

以下是代码段：http://jsfiddle.net/webyourway/wsfxxcn9/11/

$(document).ready(function () {
    $('.class').each(function(i){
        if (i % 2 == 0) {
            $(this).addClass('even');
        } else  {
            $(this).addClass('odd');
        }
    });
})

您可以使用任何版本的jQuery。

类目标上的CSS偶数/奇数

3 个答案: