Правильный способ сделать Hover / Focus / Visited по ссылкам с классом?

Question

Как правильно указать состояние наведения / фокуса / посещения для ссылки, которая имеет класс?

a:focus.class{}

или

a.class:focus{}

Кажется, что оба работают, просто интересно, какой путь считается правильным .

Answer 1

Оба верны, поскольку псевдокласс может появиться где угодно.

Из спецификации CSS2 :

Псевдо-классы разрешены в любом месте в селекторах, в то время как псевдоэлементы могут добавляться только после последнего простого селектора селектора.

Лично я предпочитаю второй, хотя, в основном для читабельности, он может изменяться каквы идете, например, :hover, поэтому я предпочитаю иметь все статическое, а не динамическое, а не микс ... просто больше смысла, я думаю.

Answer 2

Оба хороши в соответствии со спецификацией CSS2.1 :

Простой селектор - это либо селектор типа, либо универсальный селектор, за которым сразу следует ноль или более селекторов атрибутов, селекторов идентификаторов или псевдоклассов в любом порядке.

Псевдоэлемент (: after,: before) разрешен только в конце, хотя

Псевдоклассы разрешены где угодно в селекторах, в то время как псевдоэлементы могут добавляться только после последнего простого селектора селектора.

Лично я бы также держал псевдоклассы в конце, так как я думаю, что это улучшает читаемость.

Answer 3

Я думаю, что для удобства чтения я бы использовал второй.Объявление псевдокласса сначала может быть легко пропущено во время обслуживания.

Answer 4

Единственный пример этого, который я мог найти в спецификации , был таким:

a.external:visited { color: blue }

Как Ник, я предпочитаю этот путь.

Answer 5

Я лично использую второй, вот как я это вижу:

Вы должны думать об этом с семантикой, вы бы сказали

"Когда класса вызывает событие Я хочу, чтобы произошло."

не это:

"Когда вызывает событие , проверьте, относится ли оно к классу , затем выполните ."