CSS，选择if：first-child有class =“selected”

Question

我在<a>中有两个<p>，我想在选中时为它们分配不同的边框。

当用户点击<a>时，JavaScript会将类设置为"selected"，如果第一个<a>，则边框将变为绿色，但如果第二个<a>，则边框将变为绿色单击并分配class =＆＃34; selected＆＃34;边界将变为红色。

我想在CSS中做的事情是：

a:first-child.selected {border-color:green}
a.selected {border-color:red}

但这不起作用。

有很多例子描述了如何选择特定类的第一个子节点但没有描述如何选择某个标签的第一个子节点，如果它具有某个类。

这有可能实现吗？

我现在所做的是将第一个<a>设置为class="yesselected"，如果点击第二个class="noselected"则会{{1}}。

但我真的想知道是否有可能选择一个标签，如果它是第一个并且它有某个类

Answer 1

我原本以为你的css略有偏差，你需要最后的伪元素。在伪类的情况下，这似乎是错误的。感谢@ BoltClock的独角兽

a.selected:first-child {border-color:green}
a.selected {border-color:red}

但是我不得不问你的css是否设置了边框以显示其他所有需要的边框值声明？

a{border: 1px solid transparent;}
a.selected:first-child {border-color:green}
a.selected {border-color:red}

http://jsfiddle.net/8hPw8/

Answer 2

不应该     a.selected：第一子 ？

编辑：Boltclock是正确的，顺序无关紧要。

这与:first-child选择器的确切行为有关。

a:first-child

是指 a 标记，它是其父元素的第一个子元素，而不是元素的第一个 a 子元素。< / p>