css - 当某些元素之前嵌套时如何使用CSS选择元素

Question

在这种情况下是否可以使用 CSS 选择器只选择元素 4？

<div>
  <div class="a">item 1</div>
  <div class="a">item 2</div>
  <div class="a">item 3</div>
</div>
<div class="a">item 4</div>
<div class="a">item 5</div>

Answer 1

在这个确切的例子中，是的——但是如果你变得更复杂，它会变得丑陋，你可能需要一些(相对简单的)JavaScript。

在此示例中，仅使用 Adjacent Sibling选择器与 :not() 结合使用伪类。这将针对任何 class="a"，它紧跟在 不是 class="a" 的 div 之后。

div:not(.a) + .a {
  color: red;
}

<div>
  <div class="a">item 1</div>
  <div class="a">item 2</div>
  <div class="a">item 3</div>
</div>
<div class="a">item 4</div>
<div class="a">item 5</div>