如何在以前嵌套某些项目时使用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" div之后的任何class="a"。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以这样做：

＆＃13;

＆＃13;

body > :nth-child(2) {
 color:blue;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;