爲單個鏈接專門設計顏色

我試圖創建一個CSS文件菜單欄，其中包含除單個鏈接外的所有灰色文本，但是我所做的每一次嘗試都會生成全部灰色或全部綠色鏈接文本。爲單個鏈接專門設計顏色

如果你看看下面，EcoSolutions應該是綠色的，其餘灰色

我包括我的最新嘗試....希望有人能制止我瘋狂：d

感謝

<ul id='Navigation' class='MenuBar'> 
    <li><a href="../index.php">Home</a> 
     <img src='images/separator.jpg'/></li> 
    <li><a href="../simplify.php">Simplify</a> 
     <img src='images/separator.jpg'/></li> 
    <li><a href="../ecosolutions.php"class="green">EcoSolutions</a> 
     <img src='images/separator.jpg'/></li> 
    <li><a href="../contact_us.php">Contact</a> 
     <img src='images/separator.jpg'/></li>   
    <li><a href="../partners.php">Partners</a> 
     <img src='images/separator.jpg'/></li> 
    <li><a href="../services.php">Services</a> 
     <img src='images/transSeparator.png'/></li> 
</ul> 


/**** MenuBar STYLES ****/ 

.MenuBar 
{ 
    width: 916px; 
    padding: 0px 0px 0px 50px; 
    margin: 0px 0px 0px 0px; 
    text-align: center; 
    color: #888; 
} 
.MenuBar ul 
{ 
    list-style-type: none; 
    font-size: .9em; 
    cursor: default; 
    font-weight: bold; 
    padding: 10px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
    font-family:Verdana, Geneva, sans-serif; 
    color: #888; 
} 

.MenuBar ul li img 
{ 
    padding: 0px 0px 0px 0px; 
    margin: 0px 25px 0px 25px; 
    vertical-align: middle; 
} 

.MenuBar li 
{ 
    list-style-type: none; 
    font-size: .9em; 
    position: relative; 
    cursor: pointer; 
    text-decoration: none; 
    text-align: center; 
    float: left; 
    height: 37px; 
    padding: 0px; 
    margin: 0px 0px 0px 0px; 
    top: auto; 
    bottom: auto; 
    font-family:Verdana, Geneva, sans-serif; 
    color: #888; 
} 

.green a:link, a:visited, a:active 
{ 
    display: inline; 
    color: #94cf01; 
    padding: 0px; 
    margin: 0px; 
    text-decoration: none; 
} 
.MenuBar ul li a:link, a:visited, a:active 
{ 
    display: inline; 
    cursor: pointer; 
    color: #888; 
    padding: 0px; 
    margin: 0px; 
    text-decoration: none; 
} 

.MenuBar ul li a:hover 
{ 
    display: inline; 
    color: #FF0000; 
    padding: 0px; 
    margin: 0px; 
}

來源

2010-02-25 dmschenk

首先，你需要在href的結束標記和關鍵字'類之間添加空格'。其次，您可以將樣式格式化爲代碼以使其更具可讀性。 – AxelEckenberger 2010-02-25 17:54:25

正如Catfish暗示的那樣，鏈接的CSS選擇器不正確。您必須在複合選擇器中重複該類。

你需要改變風格上的非綠色鏈接，也就像這樣：

.MenuBar ul li a:link, 
.MenuBar ul li a:visited, 
.MenuBar ul li a:active { 
    /* styles here */ 
}

但問題是，這些選擇將適用於綠色鏈接，並且是更具體的，他們將覆蓋Catfish寫的綠色鏈接選擇器。這將不得不改變爲至少與常規鏈接選擇器一樣具體。

.MenuBar ul li a.green:link, 
.MenuBar ul li a.green:visited, 
.MenuBar ul li a.green:active { 
    /* styles here */ 
}

希望有幫助！

來源

2010-02-25 18:00:13

謝謝大家！我錯過了這麼多！它像一個魅力。實際上所有答案的工作。 – dmschenk 2010-02-25 20:24:20

嘗試修改此

.green a:link, a:visited, a:active 
{ 
    display: inline; 
    color: #94cf01; 
    padding: 0px; 
    margin: 0px; 
    text-decoration: none; 
}

這個

a.green:link, a.green:visited, a.green:active 
{ 
    display: inline; 
    color: #94cf01; 
    padding: 0px; 
    margin: 0px; 
    text-decoration: none; 
}

來源

2010-02-25 17:55:48 Catfish

見我的意見......但

.MenuBar ul li a.green { color: green; }

應該工作。

來源

2010-02-25 17:55:57 AxelEckenberger

總結起來，改變這種

<li><a href="../ecosolutions.php"class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

這個（注意HREF之間的空間= 「」和類= 「」）

<li><a href="../ecosolutions.php" class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

然後在你的CSS，變化這個（你現在所擁有的基本上意味着你已經擁有了另一個綠色類的元素，而不是你的HTML所說的）;）

.green a:link, a:visited, a:active 
{ 
    display: inline; 
    color: #94cf01; 
    padding: 0px; 
    margin: 0px; 
    text-decoration: none; 
}

這個

a.green:link, a.green:visited, a.green:active 
{ 
    display: inline; 
    color: #94cf01; 
    padding: 0px; 
    margin: 0px; 
    text-decoration: none; 
}

您也可以更直接，把

.MenuBar ul li a.green:link, .MenuBar ul li a.green:visited, .MenuBar ul li a.green:active 
{ 
    display: inline; 
    color: #94cf01; 
    padding: 0px; 
    margin: 0px; 
    text-decoration: none; 
}

希望這有助於

來源

2010-02-25 18:01:58 Karinne

爲單個鏈接專門設計顏色

回答

相關問題