html - SCSS: :nth-of-type() 在特定类上

Question

所以我以前从未遇到过这个问题，这就是为什么我可能会如此困惑。考虑以下：

.container .box {
  background: red;
  border: 1px solid;
  display: block;
  height: 20px;
  width: 20px;
}

conatainer .box.fancy:nth-of-type(2) {
  background: green;
}

<div class="container">
  <span class="box"></span>
  <span class="box fancy"></span>
  <span class="box fancy"></span>
  <span class="box fancy"></span>
  <span class="box"></span>
</div>

我想用 class 选择第二个元素.fancy。我也试过了:nth-child()。甚至可以只使用 CSS 吗？

Answer 1

你有点可以，但需要一些解决方法：

.container {
  counter-reset: boxes;
}

.box {
  counter-increment: boxes;
}

.box::before {
  content: 'Box ' counter(boxes);
}

/* set color for all .box starting from the second .fancy class */
.box.fancy ~ .box.fancy {
  color: red;
}


/* reset the color for all .box starting from the third .fancy class */
.box.fancy ~ .box.fancy ~ .box.fancy {
  color: initial;
}

<div class="container">
  <span class="box"></span>
  <span class="box fancy"></span>
  <span class="box fancy"></span><!-- selected -->
  <span class="box fancy"></span>
  <span class="box"></span>
</div>

<div class="container">
  <span class="box fancy"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box fancy"></span><!-- selected -->
</div>

<div class="container">
  <span class="box fancy"></span>
  <span class="box"></span>
  <span class="box fancy"></span><!-- selected -->
  <span class="box fancy"></span>
  <span class="box fancy"></span>
</div>