Почему псевдоклассы ссылок не работают в селекторе классов?

Вот JSFiddle, иллюстрирующий проблему.

С помощью этого CSS:

.btn {position:relative; width:auto; background:#2c96c9; color:#fff; cursor:pointer}
.btn a:link {color:#fff; text-decoration:none}
.btn a:visited {color:#fff; text-decoration:none}
.btn a:hover {color:#000; text-decoration:none}
.btn a:active {color:#000; text-decoration:none}

Ни одно из правил a: не применяется к этому HTML:

<a class="btn" href="http://google.com">Why doesn't this work?</a>

Почему? Или как правильно заставить их применяться к HTML-ссылкам?


html css css-selectors pseudo-class
person feetwet    schedule 25.10.2016    source источник
comment
Селекторы :link, :visited, :hover и :active являются псевдоклассами не псевдоэлементы. ::after и ::before являются примерами псевдоэлементов.. .   -  person War10ck    schedule 25.10.2016
comment
Пробел между .btn и a означает поиск якоря, который является потомком элемента с классом .btn.   -  person j08691    schedule 26.10.2016
comment
@ War10ck - спасибо; только что исправлено.   -  person feetwet    schedule 26.10.2016

Ответы (2)


arrow_upward
2
arrow_downward

Ваши селекторы не работают, потому что в настоящее время вы выбираете тег a внутри элемента класса .btn, потому что пробел в селекторах означает выбор потомка. Как это написано сейчас, это будет предлагать такую ​​​​разметку:

<div class="btn" >
    <a href="http://google.com">Why doesn't this work?</a>
</div>

Но для <a class="btn" href="...">...</a> вы должны использовать:

.btn {position:relative; width:auto; background:#2c96c9; color:#fff; cursor:pointer}
a.btn:link {color:#fff; text-decoration:none}
a.btn:visited {color:#fff; text-decoration:none}
a.btn:hover {color:#000; text-decoration:none}
a.btn:active {color:#000; text-decoration:none}
person andreas    schedule 25.10.2016

arrow_upward
0
arrow_downward

Вам нужно изменить порядок; селектор элемента должен быть указан перед псевдоклассом.

person Kai    schedule 25.10.2016