基于类的 CSS 选择器

Question

我通常喜欢使用 CSS 选择器，但有一个具体情况我不明白，而且像 Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? 这样的引用也不能帮助我解决这个问题。

假设这是我的代码:

.zero .one:nth-child(2) {
  color: red;
}

<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>

<br>

<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>

<br>

<div class="zero">
  <div>Bla bla bla</div>
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div>Okay!</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>

我选择 .zero .one:nth-child(2) 根据我的理解，.one 容器中具有类 .zero 的第二个子元素将被选中。但在这种情况下，它采用每个 <div class="one">Lol</div> 容器的第一个而不是第二个 .zero。

问题是:如何选择每个 <div class="one">Lol</div> 容器的每隔一个 .zero？

Answer 1

:nth-child(n) 在这里不会有任何帮助，并且据我所知 :nth-class(n) 不存在。

您可以做的是使用 ~ 选择器，并使用它两次来进行重置，无论结构如何:

示例

.zero .one~.one {/* look for any class one standing somewhere after class one */
  color: red;
}

.zero .one~.one~.one {/* now if we find a third one or more; lets reset it */
  color: initial;
}


/* only for layout demo purpose, not relevant for the question */
div[class]:before {
  content: 'My class is: ' attr(class);
  color: green;
  background: yellow;
  padding-inline: 0.5em;
  margin: inline-end:1em;
}

.zero {
  background: lightgray;
}

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
  gap: 1em;
}

<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>
<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>
<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="two">loL</div><!-- it can be no class or another in the way, does not matter -->
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>
<div class="zero">
  <div class="one">Lol</div>
  <div>Bla bla bla</div>
  <div>Bla bla bla</div>
  <div>Bla bla bla</div>
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>