CSS3 nth-of-type 结合类

Question

我有一个名为 .j-l-page-wrapper 的页面包装器类。我有一个名为 .j-v-section-wrapper 的节包装器类。我希望页面包装器中的每个部分包装器都具有交替的背景颜色。我使用了以下 CSS:

div.j-l-page-wrapper div.j-v-section-wrapper:nth-of-type(even) {
    background-color: @j-var-color-section-wrapper-bg-mod1;
}

div.j-l-page-wrapper div.j-v-section-wrapper:nth-of-type(odd) {
    background-color: @j-var-color-section-wrapper-bg-mod2;
}

连同 HTML

<div class="j-l-page-wrapper">
    <div class="j-v-section-wrapper"></div>
    <div class="j-v-section-wrapper"></div>
    <div class="j-v-section-wrapper"></div>
    <div class="j-v-section-wrapper"></div>
</div>

但是，没有应用交替背景颜色，这让我认为我没有应用正确的选择器。

我怎么说，使用 CSS3，将基于 even/odd 的背景着色应用于包含 的一种类型的 div另一种类型的 div？换句话说，如果我的 HTML 是:

<div class="j-l-page-wrapper">
    <div class="j-v-section-wrapper"></div>
    <div class="something-else"></div>
    <div class="j-v-section-wrapper"></div>
    <div class="j-v-section-wrapper"></div>
    <div class="j-v-section-wrapper"></div>
    <div class="something-else"></div>
</div>

...我仍然希望指定类型的四个 div 具有交替的颜色。

Answer 1

简单地说，使用第二个标记配置，您无法使用 CSS 获得所需的行为。

div.YOUR_CLASS:nth-of-type()计算同一级别的所有 div 元素。向选择器添加一个类只是确保样式仅应用于具有该类的元素，但它会一直计算所有具有相同级别的 div。

解决方法:

您可以用类 .something-else 替换标签通过其他标签(例如 <span> 元素)，它将根据需要与 :nth-of-type() 一起工作

DEMO

HTML :

<div class="j-l-page-wrapper">
    <div class="j-v-section-wrapper"></div>
    <span class="something-else"></span>
    <div class="j-v-section-wrapper"></div>
    <div class="j-v-section-wrapper"></div>
    <div class="j-v-section-wrapper"></div>
    <span class="something-else"></span>
</div>