CSS 从具有特定属性的元素中选择第一个子元素答案

【问题标题】：CSS select the first child from elements with particular attributeCSS 从具有特定属性的元素中选择第一个子元素
【发布时间】：2011-10-31 00:01:18
【问题描述】：

假设我们有以下代码：

<node>
  <element bla="1"/>
  <element bla="2"/>
  <element bla="3"/>
  <element bla="3"/>
  <element bla="3"/>
  <element bla="4"/>
</node>

你将如何选择第一个属性等于 3 的孩子？我在想也许这可以完成这项工作：

element[bla="3"]:first-child

...但它没有工作

【问题讨论】：

【解决方案1】：

:first-child 伪类只查看第一个子节点，因此如果第一个子节点不是 element[bla="3"]，则不会选择任何内容。

属性没有类似的过滤器伪类。解决此问题的一种简单方法是选择每一个，然后排除第一个之后的内容（此技巧在 here 和 here 进行了解释）：

element[bla="3"] {
}

element[bla="3"] ~ element[bla="3"] {
    /* Reverse the above rule */
}

当然，这仅适用于应用样式；如果您想选择该元素用于样式以外的其他目的（因为您的标记似乎是任意 XML 而不是 HTML），您将不得不使用类似 document.querySelector() 的其他内容：

var firstChildWithAttr = document.querySelector('element[bla="3"]');

或者一个 XPath 表达式：

//element[@bla='3'][1]

【讨论】：

【解决方案2】：

:not([bla="3"]) + [bla="3"] {
  color: red;
}

<div>
  <p bla="1">EL1</p>
  <p bla="2">EL2</p>
  <p bla="3">EL3</p>
  <p bla="3">EL3</p>
  <p bla="3">EL3</p>
  <p bla="4">EL4</p>
</div>

【讨论】：