0

I'm trying to show the current page link in a different color. I've found other answers that will do this, but its still not working. I'm using a class of current_link on the respective links of each page. I also found an answer that said to apply the !important tag to the color rule but that didn't do anything. I'm thinking I have something small wrong or that I'm not aware of. Maybe some kind of ordering rule. Here's the CSS rules relative to my links. As you can see I have .current_link at the top (I figured this would get rid of any ordering/over riding issues). The relative HTML naming will follow.

.current_link {
    color: #00AD26;
}

#main_nav a:link, a:visited {
    text-decoration:none;
    color: #00A3E6;
}
#main_nav a:hover {
    text-decoration: none;
    color: #A8EDFF;
}
#main_nav a:active {
    text-decoration: none;
    color: #00B7FF;
}


a:link, a:visited {
    text-decoration:none;
    color: #00A3E6;
}
a:hover, a:active {
    text-decoration: none;
    color: #00B7FF;
}

Relative HTML from one of the pages.

<ul id="main_nav" class="grid_5 prefix_9">
    <li id="home" class="current_link"><a href="index.html">Portfolio</a></li>
    <li id="about"><a href="about.html">About</a></li>
    <li id="contact"><a href="contact.html">Contact</a></li>
</ul>
4

3 に答える 3

1

これを試して：

.current_link a {
    color: #00AD26 !important;
}
于 2013-05-17T16:51:39.890 に答える
1

あなたの.current_link一致<li>.
の<a>内側は<li>、親要素から継承した色をオーバーライドします。

<a>クラスを移動するか、セレクターを変更して<a>内の要素を選択することにより、色をそれ自体に適用する必要があります<li>。

また、下位のルールは以前のルールを上書きします (特定性が同じ場合)。

于 2013-05-17T16:49:40.313 に答える
0

以下を使用する必要があります。

#main_nav li.current_link a {
    color: #00AD26;
}

これにより、他のセレクターが無効になり、使用が回避され!importantます。

于 2013-05-17T16:57:25.620 に答える