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

2018-06-07 11:21:04

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

<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

...但它不起作用

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

链接地址: http://www.djcxy.com/p/22863.html