Question

我有一个页面，其中包含任意数量的后续section元素，我希望通过具有role="separator"属性的部分重置交替的背景颜色：

HTML代码

<main>
    <section></section>
    <section role="separator"></section>
    <section></section>
    <section></section>
    <section role="separator"></section>
    <section></section>
    <section></section>
    <section></section>
</main>

这基本上意味着section之后的每秒（奇数）section[role="separator"]应该获得不同的背景颜色。使用上面的例子，这是应该发生的事情：

白
白色（分隔符）
白
灰色
白色（分隔符）
白
灰色
白

使用以下CSS（但）可以轻松解决此问题：

CSS代码

section:not([role="separator"]) + section:not([role="separator"]) {
    background-color: #f7f7f7;
}

section:not([role="separator"]) + section:not([role="separator"]) + section:not([role="separator"]) {
    background-color: #fff;
}

......但正如您所看到的，这引入了一个严重的限制因素。后来的第四个section:not([role="separator"])元素的背景与之前的背景不同。我当然可以释放恶魔并添加更多＆＃34;紧接着＆＃34;选择器，但你看到了它的位置。

对于任意数量的后续非分隔符部分，我应该使用什么来解决上述问题？

我很欣赏只有CSS（CSS3）的答案，如果可能的话。

Answer 1

如果您可以将DOM分离出去以拆分这些部分，您可以使用jquery来设置:even元素的样式。

例如

<main>
  <div class="sections">
    <section>1</section>
  </div>
  <section role="separator"></section>
  <div class="sections">
    <section>1</section>
    <section>2</section>
  </div>
  <section role="separator"></section>
  <div class="sections">
    <section>1</section>
    <section>2</section>
    <section>3</section>
  </div>
</main>

您可以使用选择器添加“奇怪”字样。分类到正确的元素。

$('.sections').find('section:odd').addClass('odd')

注意，这是基于零的，因此上面为每个元素添加一个类，其中包含偶数。

编辑：

正如sholanozie所说，你可以使用：

.sections section:nth-of-type(even) {
  background-color: gray;
}

CSS交替样式开始后由某个元素重置

1 个答案: