CSS选择器问题：如何选中前序含指定子元素的表头单元格

问题背景 #

现有如下HTML结构，需实现两个样式需求：

1. 所有存在前置表头单元格的表头（即Header 2、Header 3）内的.cell元素背景变为黄色——此前移除.cell子元素时样式生效，保留.cell时失效。
2. 仅自身含.open类且前置存在含.open类的表头的单元格（即Header 3）内的.cell元素背景变为黄色，需解决CSS无直接前置兄弟选择器的限制。

<table>
  <thead>
    <tr>
      <th><div class="cell">Header 1</div></th>
      <th class="open"><div class="cell">Header 2</div></th>
      <th class="open"><div class="cell">Header 3</div></th>
    </tr>
  </thead>
</table>

场景1：所有带前置表头的单元格子元素变黄 #

解决方案CSS #

/* 选中非第一个表头单元格内的.cell元素 */
th:not(:first-child) .cell {
  background-color: yellow;
}

说明 #

移除.cell时，直接用th:not(:first-child)或th + th即可选中目标表头；现在需要选中表头内部的.cell子元素，只需在选择器末尾追加.cell，精准定位到子元素层级即可生效。

场景2：仅自身带.open且前置有.open的单元格子元素变黄 #

解决方案CSS #

/* 选中前面存在带.open类的兄弟表头、且自身也带.open的表头内的.cell */
th.open ~ th.open .cell {
  background-color: yellow;
}

原理 #

CSS没有直接的前置兄弟选择器，但可利用**后续兄弟选择器~**反向实现需求：

• th.open ~ th.open 匹配所有「跟在带.open类的表头之后、自身也带.open类」的表头，这类表头的前置必然存在至少一个带.open的表头
• 追加.cell即可定位到目标子元素，恰好匹配需求中的Header 3。

若需限制为紧邻前置是.open的场景，可将~替换为紧邻兄弟选择器+，即th.open + th.open .cell。

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