在 CSS 中，想要覆盖我的 a:link 和 a:hover 指令以用于特定范围答案

【问题标题】：In CSS, want to override my a:link and a:hover directives to for a specific span在 CSS 中，想要覆盖我的 a:link 和 a:hover 指令以用于特定范围
【发布时间】：2010-05-20 10:59:58
【问题描述】：

这对你们 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 等忽略“标题”div 中的任何内容。我怎样才能做到这一点？假设我需要为那个 div/span 覆盖它？

【问题讨论】：

标签： css

【解决方案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 inheritance

【讨论】：

【解决方案2】：

尝试#header a:link {}、#header a:active {} 等。

【讨论】：