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]