Question

我有一个导航栏，我需要活动页面，在li元素上标记为“subactive”类，以获得白色文本而不是黑色。可以在此处找到HTML和CSS：http://jsfiddle.net/a4hBz/

我在CSS中使用.subactive选择器上的颜色，但浏览器忽略了它。

Answer 1

这主要是由于CSS如何“衡量”风格。 ID 始终对标准标记名称，类名称或伪类具有更多的主导权。一个简单的解决方案是与您的锚类一样具体应用“活动”样式，就像使用其他标准元素一样。基本上是：

.subactive a

应该成为

#sidenav .subactive a

如果这对您的架构不起作用，您需要将#sidenav转入某个类，或者以其他方式解决它。

顺便说一句，我之前提到的是一种风格specificity。按照目前的情况，你的款式如下：

#sidenav a              a=0, b=1, c=0, d=1 -> specificity = 0,1,0,1
.subactive a            a=0, b=0, c=1, d=1 -> specificity = 0,0,1,1
#sidenav .subactive a   a=0, b=1, c=1, d=1 -> specfiicity = 0,1,1,1

几乎可以这样想：

(a * 1000) + (b * 100) + (c * 10) + d

数量最多的风格获胜。

Answer 2

添加!imporatant：

.subactive a
{
    color: #fff!important;

    /**/

}

或者增加定义的specificity：

http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 3

如果我不需要，我不会使用！important。

为了使它工作，我会替换行

#sidenav a:hover, .subactive a

到

#sidenav a:hover, #sidenav .subactive a:link

并删除下面似乎没有使用的代码

.subactive a
{
   color: #fff;
   background-color: #034676;
}

查看http://jsfiddle.net/a4hBz/1/

上的工作示例

链接的文本颜色与“活动”类

3 个答案: