不能从列表中单独设置 <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。

一种选择是将specificity 的.theSelected 增加到类似：

Example Here

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

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

---

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

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

这是用于自动计算这些值的helpful link。