Тег привязки наследуется от непредусмотренного элемента
У меня есть фрагмент следующего кода, а теги из заголовка наследуют стили тегов от основного. Я знаю, что могу предотвратить добавление классов к каждому тегу, но есть ли другой способ решить эту проблему?
header li{
display: inline-block;
}
header a:link, a:visited, a:active{
text-decoration: none;
color: #fff;
}
header a:hover{
color: #333;
}
main a:link, a:visited, a:active{
color: #0ba39c;
}
main a:hover{
color: #252525;
} <header>
<ul>
<li>
<a href = "#">First element</a>
</li>
<li>
<a href = "#">Second element</a>
</li>
</ul>
</header>
<main>
<ul>
<li>
<a href = "#">First element</a>
</li>
<li>
<a href = "#">Second element</a>
</li>
</ul>
</main>Я также пытался указывать на него так: header > ul > li > a:link... но это тоже не работает.
Я видел на сайтах много разных стилизованных анкоров без дополнительных классов, так что могу поспорить, что что-то упускаю.
Запретить тегам в заголовке наследовать стили от тегов в main.
Ответы 2
Вы и используете их атрибут для вызова определенного тега привязки таким образом
a[href = "abc"]{
/*your css property*/
}
Комбинатор запятых CSS используется для перечисления нескольких отдельных селекторов.
Итак, вместо
header a:link, a:visited, a:active {
...
}
(что приводит к 3 селекторам header a:link, a:visited и a:active)
полный селектор для каждого состояния ссылки должен быть объявлен следующим образом:
header a:link,
header a:visited,
header a:active {
...
}
(что приводит к 3 селекторам header a:link, header a:visited и header a:active)
То же самое касается main. Я обновил ваш пример с различимыми цветами:
header li{
display: inline-block;
}
header a:link,
header a:visited,
header a:active {
text-decoration: none;
color: red;
}
header a:hover{
color: yellow;
}
main a:link,
main a:visited,
main a:active {
color: green;
}
main a:hover{
color: blue;
} <header>
<ul>
<li>
<a href = "#">First element</a>
</li>
<li>
<a href = "#">Second element</a>
</li>
</ul>
</header>
<main>
<ul>
<li>
<a href = "#">First element</a>
</li>
<li>
<a href = "#">Second element</a>
</li>
</ul>
</main>
что именно вы хотите сделать?