Question

我正在使用一个可以在不同位置的页面上多次出现的元素。根据页面的用途，它可能被另一个元素中断。在我下面的例子中，我想实现红色，蓝色，红色，蓝色......背景的顺序保持不变 - 无论我插入多少其他元素。这可能吗？

.test:nth-child(odd) {
  background: #ff0000;
}
.test:nth-child(even) {
  background: #0000ff;
}

<h1>This is a heading</h1>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>

Answer 1

抓住你的屁股，是时候搞砸了：

使用（深呼吸）~ general sibling combinator，我们可以改变某个元素显示后元素的显示方式。

             .test:nth-child(odd)  { background: #933C96; }
             .test:nth-child(even) { background: #EB811C; }
.interrupt ~ .test:nth-child(odd)  { background: #EB811C; }
.interrupt ~ .test:nth-child(even) { background: #933C96; }

<h1>This is a heading</h1>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>

在这里，我们已经应用了您的初始样式，然后为交换颜色的.interrupt之后的任何行添加了额外的级联规则。 .interrupt可以是任何内容，您甚至可以使用:not()做一些奇特的工作，以使其更加通用，但这个想法是一样的。

但是，如果你有多个中断元素怎么办？！仍然可能！但有点（方式）更加操纵：

＆＃13;

                                                    .test:nth-child(odd)  { background: #933C96; }
                                                    .test:nth-child(even) { background: #EB811C; }

                                       .interrupt ~ .test:nth-child(odd)  { background: #EB811C; }
                                       .interrupt ~ .test:nth-child(even) { background: #933C96; }

                          .interrupt ~ .interrupt ~ .test:nth-child(odd)  { background: #933C96; }
                          .interrupt ~ .interrupt ~ .test:nth-child(even) { background: #EB811C; }

             .interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(odd)  { background: #EB811C; }
             .interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(even) { background: #933C96; }

.interrupt ~ .interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(odd)  { background: #933C96; }
.interrupt ~ .interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(even) { background: #EB811C; }

＆＃13;

<h1>This is a heading</h1>
<p class="test">The first paragraph.</p>
<p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
<p class="test">The third paragraph.</p>

＆＃13;

通过将一般兄弟组合器堆叠在一起，我们可以准备任何数量的中断元件，只要我们能够确定不会超出我们在指定的数量范围内。 CSS。

Answer 2

使用纯CSS除非你将每个元素部分包装在另一个元素（如div）中，或者使用不同的伪类和不同的结构，以便你想要排除的行不是＆＃39; t相同类型的元素。

原因是nth-child是一个匹配元素（而不是类）的伪类，因此在您的示例中，所有段落都被视为子节点，即使是没有测试类的段落。该特定段落仍然是一个孩子（因此它符合第n个孩子的标准并被计算，但样式没有被应用，因为它不能满足它对测试类的限制）。我倾向于考虑使用带有伪类选择器的类作为过滤器，因此.test:nth-child(odd)之类的内容就是将以下规则应用于所有子元素，但前提是它们具有类测试。

如果您能够将要应用样式的元素组包装到容器元素中（参见下文），那么它们将成为该新容器的子元素，并且会在每个容器上重新启动该数字。

＆＃13;

.test:nth-child(odd) {
  background: #ff0000;
}
.test:nth-child(even) {
  background: #0000ff;
}

＆＃13;

<h1>This is a heading</h1>
<div>
  <p class="test">The first paragraph.</p>
  <p class="test">The second paragraph.</p>
  <p class="test">The third paragraph.</p>
  <p class="test">The first paragraph.</p>
  <p class="test">The second paragraph.</p>
  <p class="test">The third paragraph.</p>
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
<div>
  <p class="test">The first paragraph.</p>
  <p class="test">The second paragraph.</p>
  <p class="test">The third paragraph.</p>
</div>

＆＃13;

另一种选择是使用JavaScript。

中断时如何让第n个孩子上班

2 个答案: