浏览器中不会尊重CSS Active Class吗？

Question

我正在尝试按钮导航.单击一个按钮时,该锚标记会更改其背景颜色以显示其处于活动状态.我正在使用带有渐变的background属性,但是当我将活动类应用于链接时,背景不会改变颜色.我试过在Chrome控制台中查看,它只是显示已加载新的背景颜色但它不适用它.(它有通过它的线,好像它是由另一个CSS规则覆盖.但新的CSS颜色是在旧颜色之后,所以按层次顺序,它应该优先.任何关于我做错的想法？

这是我的CSS代码:

.main-nav li a {
font-size: .9em; 
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
color: #444135;
display: inline-block;
margin: 24px 12px;
background: #AFE4B3; /* Old browsers */
 background: -moz-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* FF3.6+ */
 background: -webkit-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* Opera 11.10+ */
 background: -ms-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* IE10+ */
 background: linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* W3C */
 border-radius: 10px;
 padding: 7px;
 width: 100px;
}

.active {
 background: -moz-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* FF3.6+ */
 background: -webkit-gradient(#FF6440, #FF8E73 , #FF6440); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* Opera 11.10+ */
 background: -ms-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* IE10+ */
 background: linear-gradient(#FF6440, #FF8E73 , #FF6440); /* W3C */
}

这是它应用于的HTML:

<nav class="main-nav">
    <ul>
        <li><a class="active" href="index.php">Home</a></li>
        <li><a href="library.php">Library</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

这是一个问题的小提琴:http://jsfiddle.net/6udt8/

提前致谢!

Answer 1

.active是那么具体比.main-nav li a所以要通过写作更具体

nav ul li a.active {
   /* Styles goes here */
}

或者甚至更具体......

nav.main-nav ul li a.active {
   /* Styles goes here */
}

Demo

如评论所述,为什么会发生这种情况？那么让我来解释一下,这里的问题是选择器的特殊性,让我们做一个演示实例......

但首先让我们来看看文档的内容......

来自W3C 6.4.3计算选择器的特异性

选择器的特异性计算如下:

• 如果声明来自的是一个'style'属性而不是一个带选择器的规则,则为1;否则为0(= a)(在HTML中,元素的"style"属性的值是样式表规则.这些规则没有选择器,所以a = 1,b = 0,c = 0,d = 0.)
• 计算选择器中ID属性的数量(= b)
• 计算选择器中其他属性和伪类的数量(= c)
• 计算选择器中元素名称和伪元素的数量(= d)

特异性仅基于选择器的形式.特别是,"[id = p33]"形式的选择器被计为属性选择器(a = 0,b = 0,c = 1,d = 0),即使id属性被定义为"ID" "在源文档的DTD中.

连接四个数字abcd(在具有大基数的数字系统中)给出了特异性.

不要得到文档说的话？不要担心,提前阅读,我已经分享了一个简单的解释,然后是一篇文章,它将解释你的特异性计算.

假设我们span是class...中的一个简单元素

<span class="hello">This is just a dummy text</span>

我们使用像之类的元素选择器

span {
    color: red;
}

显然它会把它染成红色...... Demo

现在让我们声明另一个选择器

span.hello {
   color: green;
}

并将其放在样式表中,现在,将span 颜色文本变为绿色... (无论您将属性块放在样式表中的顺序如何)

Demo 2 (现在是文字green)

这是因为与简单的元素选择器相比,它span.hello {} 更具特异性span {}.

有关更详细的说明,我希望您阅读CSS特异性

您还可以使用CSS特异性计算器来比较选择器的特异性.

我span在这里分享的例子只是选择器的具体情况1

而span.hello特异性总计可达11