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

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

.theSelected 
{
   color: white;
}

知道为什么吗？

Answer 1

因为选择器.myListClass li a比.theSelectedmore specific.

一个选择是将 .theSelected 的 specificity 增加到类似这样的值：

Example Here

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

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

---

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

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

这里有一个helpful link用于自动计算这些值。