В чем разница между a::hover и a:hover?
Вопрос по псевдо классам. Допустим, есть у меня есть такие ссылки:
a{
text-decoration: none;
color: black;
}
.link1, .link2 {
transition: all .3s;
}
.link1:hover{
color: #ff9900;
}
.link2::hover{
color: #66ff00;
}
<a class = "link1">Ссылка с классом 1</a>
<a class = "link2">Ссылка с классом 2</a>
У меня в google chrome корректно работает и тот и тот вариант. В здешней консоли почему-то работает только с одним двоеточием, в разных обучающих роликах псевдоклассы пишут то так, то так. В чем разница между тэг::псевдокласс и тэг:псевдокласс? Правильно писать одно двоеточие или два? Или эти записи вообще обозначают что-то разное?
Ответы (1 шт):
Изначально всегда использовали : до версии CSS3, где начали разделять:
:используется для псевдо-классов (:hover, :active...)::используется для псевдо-элементов (::before, ::after...)
Если мы будем писать везде с : (к примеру с псевдо-элементом :before) и когда-то будет реализован псевдо-класс :before (что-либо не значащий), то может случиться что-то непредвиденное (что навряд случится).
Поэтому можете всегда писать с :, а можете разделять, и для псевдо-классов писать : - и наоборот ::, для псевдо-элементов, чтобы показать, что Вы крутой.
P.S. Использование :: в старых браузерах может что-то сломать.