html - CSS，选择 if :first-child has class ="selected"

Question

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

当用户点击 <a> JavaScript 将类设置为 "selected"如果它是第一个，边框将变为绿色 <a>但如果第二个<a>单击并分配 class="selected"边框应变为红色。

我想用 CSS 做的是这样的:

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

但这不起作用。

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

这有可能实现吗？

我现在所做的是设置第一个 <a>作为class="yesselected"如果单击第二个，它将显示 class="noselected" .

但我真的很想知道是否可以选择一个标签，如果它是第一个标签并且它具有特定的类

Answer 1

我本来以为你的 css 有点不对劲，你需要最后的伪元素。在伪类的情况下，这似乎是错误的。感谢@BoltClock 的独 Angular 兽

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/