代码之家  ›  专栏  ›  技术社区  ›  brendan

在CSS中,要为特定范围重写my a:link和a:hover指令

css
  •  4
  • brendan  · 技术社区  · 14 年前

    这可能是一个垒球给你们的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”部分中的任何内容。我该怎么做呢?假设我需要覆盖这个分区/span?

    2 回复  |  直到 14 年前
        1
  •  6
  •   jessegavin    14 年前

    您可以使用这样的语法。

    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
  •  3
  •   edl    14 年前

    尝试头A:链接,头A:活动等。