风格<a> element separately from the list</a>

Question

我有一个ul：

<ul class="myListClass">
    <li><a class="theSelected" href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

文本的颜色通过样式应用：

.myListClass li a
{
    color: red;
}

我希望班级theSelected具有不同的颜色，但这对样式没有影响：

.theSelected 
{
   color: white;
}

知道为什么吗？

Answer 1

这是因为选择器.myListClass li a是more specific而不是.theSelected。

一种选择是将.theSelected的{​​{3}}增加到：

specificity

.myListClass li a.theSelected {
    color: white;
}

您也可以降低前一个选择器的特异性。

---

对于它的价值，这里是每个选择器的Example Here计算：

• .myListClass li a - 12
• .myListClass li a.theSelected - 22
• .theSelected - 10

以下是specificity，用于自动计算这些值。