Question

我的css：

.menu_2_1 ul {
    float:left;
    list-style-type:none;
}
.menu_2_1 ul li {
    float:left;
    display:inline-block;
    width:auto;
    height:55px;
    margin-left:20px;
    padding-top:25px;
}
.menu_2_1 ul li a:link, 
.menu_2_1 ul li a:visited, 
.menu_2_1 ul li a:hover, 
.menu_2_1 ul li a:active {
    text-decoration:none;
    font-size:1.70em;
    color:grey;
    padding:25px;
}
.activeLink {
    background:lightblue;
    color:red;
    font-size:1.80em;
}

我的HTML：

<div class="colm menu_2_1">
    <ul>
        <li class="activeLink"><a href="#1">Link1</a>
        </li>
        <li><a href="#2">Link2</a>
        </li>
        <li><a href="#3">Link3</a>
        </li>
    </ul>
</div>
<!--colm menu_2_1-->

我只是想将“activeLink”类添加到链接中（以便稍后我使用jQ添加并删除该类）。但是，该条件不会更改字体颜色虽然它确实会更改文本修饰或字体大小..

为什么？ Css的特异性？

非常感谢！

Answer 1

你已经给出了答案......特异性

.menu_2_1 ul li a:link比.activeClass

更具体

解决方案是使用.menu_2_1 ul li.activeLink a。

检查demo。

Answer 2

您需要更改css或html ...

更改html：

<li><a class="activeLink"...

更改css：

.activeLink a{color:#f00;}

您可能需要更加具体地使用选择器，因为您有其他针对链接的规则。

更具体的css：

div.colm menu_2_1 ul li.activeLink a{}

或者如果你更新你的html

div.colm menu_2_1 ul li a.activeLink{}

或者如果你想要懒惰，可以使用！important

像这样：

.activeLink{color:#f00!important;}

Answer 3

问题又回到了优先级，需要将CSS选择器更改为.menu_2_1 ul li.activeLink a。

.menu_2_1 ul li.activeLink a{
    background:lightblue;
    color:red;
    font-size:1.80em;
}

为什么我不能添加（字体）颜色链接添加一个类？

3 个答案: