如何禁止CSS菜單重寫標準HTML鏈接？

我用CSS創建了一個菜單，並在它下面有一個HTML鏈接，使用了一個href標籤。但是，鏈接不是藍色或帶下劃線的，而是它看起來和徘徊完全像我爲CSS使用菜單製作的鏈接。而且，無論我在希望出現的文本後面輸入標籤，此鏈接都會向左移動。如何禁止CSS菜單重寫標準HTML鏈接？

下面的代碼是什麼樣子：

<!DOCTYPE html> 
<html> 
<head> 

<style> 
ul 
{ 
float:left;position:relative;width:40%;padding:0;margin:0;list-style-type:none; 
} 
a 
{ 
float:left;width:5em;text-align:center;text-decoration:none;color:black;background-color:#c0c0c0;padding:0.2em 0.5em; 
} 
a:hover {background-color:#d0d0d0;} 
li {display:inline} 
</style> 

</head> 

<div> 
<ul> 
<li><a href="#">HOME</a></li> 
<li><a href="#">SERVICES</a></li> 
<li><a href="#">GALLERY</a></li> 
<li><a href="#">CONTACT</a></li> 
</ul> 
</div> 

<br> 
<br> 

To see a picture of Curious George, click <a href="http://cdn.mhpbooks.com/uploads/2012/05/Curious_Georg.jpg">this link</a> 

</html>

這裏是什麼樣子顯示：

http://img96.imageshack.us/img96/3938/vi22.jpg

任何幫助將非常感激。本週我剛開始學習HTML/CSS。

來源

2013-07-02 Rawrshark

感謝您的提示:-) – Rawrshark

改變你的風格，以採取特異性的優勢：

<style> 
ul { 
    float:left;position:relative;width:40%;padding:0;margin:0;list-style-type:none; 
} 
ul li a { 
    float:left;width:5em;text-align:center;text-decoration:none;color:black;background-color:#c0c0c0;padding:0.2em 0.5em; 
} 
ul li a:hover { background-color:#d0d0d0; } 
li { display:inline } 
</style>

下面是一些更多的信息鏈接在此：CSS Specificity

來源

2013-07-02 16:52:57

你真棒！非常感謝！ – Rawrshark

當然可以！ CSS是一個非常漂亮的工具，但它有時會令人困惑。 :) –

呵呵，是的。第一天我看着它，我不知所措，甚至做了噩夢，哈哈。但我喜歡每個人都很有幫助。 ;-) – Rawrshark

您需要更具體與您的CSS規則。現在它適用於所有添加和ID爲您的菜單或類似

#menu a { 
    some css here 
}

來源

2013-07-02 16:54:17 GuiGreg

ul，足以適應這個問題;） –

是的，但如果他以後需要另一個ul會導致另一個問題 – GuiGreg

仍然，它不會在其他地方的樣式鏈接:) –

如何禁止CSS菜單重寫標準HTML鏈接？

回答

相關問題