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

Question

让我们说我们有以下代码：

<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

......但它无效

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

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