nth-of-type在不同元素列表中的目标类

Question

我有一个实例，其中我有一个类.card-one的元素，我想为每个偶数元素应用一个类。这样可以正常工作，但我也有其他div .card-one嵌套在其中，我不希望这些被计算在内。

我尝试使用下面的css将元素定位为父容器的直接后代，但它不起作用。

.all-cards > .card-one:nth-of-type(even){ color: red; }

这是一个发生什么事的例子。 https://jsfiddle.net/sz5z4k58/

Answer 1

nth-of-type选择器不是指类，而是类型，即标记，在您的情况下，div和在其父元素中。所以你的nth-of-type选择器实际上选择了父类中的每个第二个DIV，如果它具有指定的类。

这有点令人困惑，而不是人们对这个名字的期望，但这就是它的工作方式......