CSS Active Class will not be respected in browser?

Question

I am trying to do button navigation. When one button is pressed, this anchor tag changes the background color to indicate that it is active. I use the background property with gradients, but when I apply the active class to the link, the background does not change color. I tried looking in the Chrome Console and it just shows that the new background color is loaded, but it doesn’t apply. (It has a line through it, as if it were rewritten by another CSS rule. But new CSS colors appear after the old colors, so in order of hierarchy, it should take precedence. Any ideas on what I'm doing wrong

Here is my CSS code:

.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 */
}

And here is the HTML to which it applies:

<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>

Here is the problem scenario: http://jsfiddle.net/6udt8/

Thanks in advance!

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 */
}

---

, ? , , ...

, ...

W3C 6.4.3

:

• count 1, 'style', , 0 (= a) ( HTML "" - . , a = 1, b = 0, c = 0 d = 0.)
• (= b)
• (= c)
• (= d)

. , "[id = p33]" (a = 0, b = 0, c = 1, d = 0), id "" DTD .

a-b-c-d ( ) .

, ? , , , , .

, span class...

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

, say

span {
    color: red;
}

, ...

,

span.hello {
   color: green;
}

, span ... ( )

2 ( green)

, span.hello {} , span {}.

---

, CSS

CSS Specificity Calculator .

, span, 1

---

span.hello 11

Answer 2

http://jsfiddle.net/6udt8/2/

.main-nav li a.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 */
}