CSS Псевдоклассы со встроенными стилями

Можно ли использовать псевдоклассы с использованием встроенных стилей?

Пример:

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

Я знаю, что приведенный выше HTML не будет работать, но есть ли что-то подобное, что будет?

PS Я знаю, что мне следует использовать внешнюю таблицу стилей, и я это делаю. Мне просто было любопытно, можно ли это сделать с помощью встроенных стилей.

Нет, это невозможно. В документах, использующих CSS, встроенный styleатрибут может содержать только объявления свойств; тот же набор инструкций, который появляется в каждом наборе правил в таблице стилей. Из спецификации атрибутов стиля :

Значение атрибута style должно соответствовать синтаксису содержимого блока объявления CSS (за исключением ограничивающих скобок), формальная грамматика которого приведена ниже в терминах и соглашениях основной грамматики CSS :

declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

Ни селекторы (включая псевдоэлементы), ни правила at, ни любые другие конструкции CSS не допускаются.

Подумайте о встроенных стилях как о стилях, применяемых к некоему анонимному селектору суперспецифического идентификатора: эти стили применяются только к тому самому элементу с styleатрибутом. (Они также имеют приоритет перед селектором идентификатора в таблице стилей, если этот элемент имеет этот идентификатор.) Технически это так не работает; это просто, чтобы помочь вам понять, почему атрибут не поддерживает стили псевдоклассов или псевдоэлементов (это больше связано с тем, как псевдоклассы и псевдоэлементы предоставляют абстракции дерева документа, которые не могут быть выражены в язык документа).

Обратите внимание, что встроенные стили участвуют в том же каскаде, что и селекторы в наборах правил, и имеют наивысший приоритет в каскаде ( !importantнесмотря на это). Таким образом, они имеют приоритет даже над состояниями псевдокласса. Разрешение псевдоклассов или любых других селекторов во встроенных стилях, возможно, приведет к новому каскадному уровню, а вместе с ним и новому набору сложностей.

Также обратите внимание, что в очень старых версиях спецификации атрибутов стиля изначально предлагалось разрешить это , однако она была отменена, предположительно по причинам, указанным выше, или потому, что реализация этого варианта была нежизнеспособной.

Не CSS, а встроенный:

<a href="#" 
   onmouseover = "this.style.textDecoration = 'none'"
   onmouseout  = "this.style.textDecoration = 'underline'">Hello</a>

См. Пример →

Вместо того, чтобы использовать встроенный CSS, вы можете использовать внутренний CSS.

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

У вас могло быть:

<a href="http://www.google.com" id="gLink">Google</a>
<style>
  #gLink:hover {
     text-decoration: none;
  }
</style>

Вы можете попробовать https://hacss.io :

<a href="http://www.google.com" class=":hover{text-decoration:none;}">Google</a>

демонстрация