CSS选择与特定属性

元素的第一个孩子让我们说，我们有下面的代码：CSS选择与特定属性

<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

...但它没有工作

来源

2011-08-19 Pass

您是否使用CSS来设置XML标记或什么？ – BoltClock

不，只是为了说明问题 – Pass

下次如果您正在设计HTML样式，请提供一个HTML示例，以防它影响到您得到的答案。我的答案涵盖了一些案例。 – BoltClock

的:first-child伪类仅着眼于第一子节点，因此，如果第一个孩子ISN” t 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]

来源

2011-08-19 23:30:18 BoltClock

CSS选择与特定属性

回答

相关问题