css - 第 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，如果它具有指定的类的话。

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