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元素。向selecor添加一个类只是确保样式仅应用于具有该类的元素，但它会继续计算具有相同级别的所有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>

CSS3 nth-of-type结合了一个类

1 个答案: