不能将<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是更具体的比.theSelected.

一个办法是增加特异性的.theSelected喜欢的东西:

这里的例子

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

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

对于它的价值,这里是每个选择器的特异性计算:

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

这是一个自动计算这些值的有用链接.