CSS Псевдокласи з вбудованими стилями

Чи можливо мати псевдокласи, використовуючи стилі вбудованого?

Приклад:

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

Я знаю, що вищевказаний HTML не працюватиме, але чи є щось подібне?

PS Я знаю, що я повинен використовувати зовнішній аркуш стилів, і це роблю. Мені було просто цікаво, чи можна це зробити, використовуючи стилі вбудованої форми.

Ні, це неможливо. У документах, що використовують CSS, вбудований 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

<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>

Демо