在CSS中,想要覆盖我的a:link和a:hover指令以获取特定范围

Question

对于CSS人来说,这可能是一个垒球......

我有这样一个网站:

<div id="header">
<span class="myheader">This is the name of my awesome site!!!!</span>
</div> 
<div id="content">whole bunch of other stuff</div>
<div="sidemenu"><ul><li>something</li><li>something else</li></ul>
<div id="footer">Some footer stuff will go here....</div>

在我的CSS中,我有一些指令来格式化超链接:

a:link { text-decoration: none; color : #ff6600; border: 0px; -moz-outline-style: none;}
a:active { text-decoration: underline; color : #ff6600; border: 0px; -moz-outline-style: none;}
a:visited { text-decoration: none; color : #ff6600; border: 0px; -moz-outline-style: none;}
a:hover { text-decoration: underline; color : #000; border: 0px; -moz-outline-style: none;} 
a:focus { outline: none;-moz-outline-style: none;}

现在这是问题所在.在我的标题中,我有一些文本是链接,但我不想像网站中的所有其他链接那样格式化.所以基本上我想要我的a:link,a:hover等忽略"header"div中的任何内容.我怎样才能做到这一点？假设我需要为div/span覆盖这个？

Answer 1

你可以使用这样的语法..

a:link { text-decoration: none; color : #ff6600; border: 0px; -moz-outline-style: none;}
a:active { text-decoration: underline; color : #ff6600; border: 0px; -moz-outline-style: none;}
a:visited { text-decoration: none; color : #ff6600; border: 0px; -moz-outline-style: none;}
a:hover { text-decoration: underline; color : #000; border: 0px; -moz-outline-style: none;} 
a:focus { outline: none;-moz-outline-style: none;}

然后使用css继承原则,您可以为#header元素内的链接创建更具体的规则,并覆盖您喜欢的任何属性.

#header a:link {  text-decoration: underline; color : #000;  }
#header a:visited {  text-decoration: underline; color : #000;  }

阅读CSS继承