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

Answer 2

尝试#header a：link {}，＃header a：active {}等。

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

2 个答案: