В CSS нужно переопределить мои директивы a: link и a: hover для определенного диапазона

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 и т. Д. Игнорировали что-либо в div «header». Как я могу это сделать? Предположим, мне нужно переопределить это для этого 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

Answer 2

try #header a: link {}, #header a: active {} и т. Д.