css - 在 CSS 中，想要覆盖我的 a :link and a:hover directives to for a specific span

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 inheritance