2010-05-20 4 views
4

Ce sera probablement une balle molle pour vous CSS gens ...CSS, veulent remplacer mon un: lien et a: hover directives à une durée spécifique

J'ai un site comme celui-ci:

<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> 

Dans mon css J'ai quelques directives pour formater les hyperliens:

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;} 

est le problème maintenant ici. Dans mon en-tête j'ai du texte qui est un lien, mais je ne veux pas le formater comme tous les autres liens du site. Donc, fondamentalement, je veux mon a: lien, a: hover, etc pour ignorer quoi que ce soit dans le div "en-tête". Comment puis-je faire ceci? Supposer que j'ai besoin de remplacer cela pour cette div/span?

Répondre

6

Vous pouvez utiliser la syntaxe comme ça ..

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;} 

Ensuite, en utilisant les principes d'héritage css, vous pouvez créer des règles plus spécifiques pour les liens à l'intérieur de l'élément #header et passer outre l'une des propriétés que vous aimez.

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

En savoir plus sur CSS inheritance

3

essayer #header a: link {}, #header a: active {} etc.

Questions connexes