当部分元素嵌套时，如何用CSS选择器仅选中item 4？

当然可以做到！先看看你的HTML结构，方便咱们理清思路：

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

这里的item 4是第一个没有被嵌套在父div里的.a元素，给你两种靠谱的CSS选择器方案：

• 方案一：排除嵌套元素后选第一个
  思路是先选中所有.a元素，排除掉那些是某个div直接子元素的.a，再取剩下的第一个：

  .a:not(div > .a):first-of-type
  

  解释：div > .a会选中嵌套在父div里的item1-3，:not()把它们排除后，:first-of-type就会精准命中剩下的第一个元素——也就是item4。

• 方案二：利用相邻兄弟关系
  因为item4正好紧接在包含item1-3的div后面，咱们可以用相邻兄弟选择器直接定位：

  div + .a
  

  解释：div + .a表示选中紧接在一个div元素之后的.a元素，完美匹配item4的位置。

这两种方法都能达到目的，你可以根据后续结构的稳定性来选——如果相邻关系不会变，方案二更简洁；如果后续可能在那个div后面加其他元素，方案一的兼容性和鲁棒性更好。

内容的提问来源于stack exchange，提问作者ffredshirt