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"]，则选择一无所有。

没有类似的属性过滤器伪类。一种简单的解决方法是选择每个对象，然后排除第一个对象之后的内容

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]