Question

我试图通过以下语法向我div中的子元素显示 alternate 颜色：

    div:nth-of-type(odd).z .b {
      background: red;
      height: 20px;
      width: 100px;
      margin: 0px;
      padding: 5px;
    }
    div:nth-of-type(even).z .b {
      background: blue;
      height: 20px;
      width: 100px;
      margin: 15px;
      padding: 5px;
    }

<div class="z">
  <div class="a"></div>`
</div>
<div class="z">
  <div class="b"></div>
</div>
<div class="z">
  <div class="b"></div>
</div>
<div class="z">
  <div class="a"></div>
</div>
<div class="z">
  <div class="b"></div>
</div>

Related JSFiddle

但它没有替代颜色，最后一个b类就像一个偶数孩子，尽管只有3个b类。请提供解决方案。

Answer 1

css完全正常工作，就像你定义它一样。要了解发生了什么，我修改了your fiddle。

所有div都需要课程z（你的基础div可以这么说）并应用even和odd选择器。然后它会查找类b的孩子。

因此，对你的两个div应用第一个规则，在第二个b div的z div上应用第二个（蓝色）。

但是，我假设您要做的事情 - 使用b或nth-of-type选择器无法计算nth-children元素的奇数/均匀度，因为这些元素需要拥有相同的父级，这与您的标记不同。此外，您的选择器应如下所示：

.b:nth-of-type(even)   /*this does not work!*/

我认为唯一的解决方案是在这种情况下使用javascript。我使用了jQuery，但当然也可以使用普通的js（而且很可能有更高效的选择器，但这是第一个，突然出现在我脑海中）。

$(".b")
   .filter(":even").addClass("even").end()
   .filter(":odd").addClass("odd");

https://jsfiddle.net/gwLsgy82/1/

编辑完整性＆＃39;缘故：

我总是把伪选择器放在最后，并且还避免了不必要的选择器权重，这提高了可读性和性能。这意味着，我写道：

.z:nth-of-type(odd) .b

而不是您的选择器div:nth-of-type(odd).z .b

CSS替代颜色到子元素

1 个答案: