选择特定班级的第一个孩子答案

【问题标题】：Selecting the first child with a specific class选择特定班级的第一个孩子
【发布时间】：2020-10-26 16:32:40
【问题描述】：

我想只选择第一个box--highlight。

<ul>
  <li>
    <a class="box "></a>
  </li>
  <li>
    <a class="box box--highlight"></a>
  </li>
  <li>
    <a class="box box--highlight"></a>
  </li>
  <li>
    <a class="box "></a>
  </li>
</ul>

我正在尝试使用相邻的兄弟组合，但它没有按预期工作

li .box--highlight + li .box--highlight {
  color: green;
}

这甚至可能吗？我想知道答案是否已经是选择父选择器（当然这是不可能的）：Is there a CSS parent selector?

【问题讨论】：

使用 Javascript，是的！
这可以做到，前提是 DOM 顺序以后不会改变。 li:nth-child(2) .box--highlight { color: green; }
你不能把类交给li元素吗？
@m4n0 我正在寻找一种纯 CSS 的方法。我可以编辑 html，但最终我没有 li 元素，这在语义上不是很好。项目的顺序会改变，所以你的建议不会奏效。
CSS 无法使用该结构，将类发送给父级，然后您可以从那里设置和重置样式，否则使用 javascript。

标签： css css-selectors

【解决方案1】：

正如上面的 cmets 所述：纯 CSS 无法做到这一点。

我现在的解决方法是删除 li 元素。

【讨论】：