Как выбрать элемент с помощью 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

Вы можете просто сделать это:

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

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

В этом конкретном примере, да - хотя, если вы станете намного более сложным, это станет уродливым, и вам, вероятно, понадобится (относительно простой) JavaScript.

В этом примере просто используйте селектор смежных братьев и сестер в сочетании с псевдоклассом :not(). Это будет нацелено на любую class="a", которая следует сразу за div, то есть , а не class="a".

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>