Можно ли использовать псевдоклассы с использованием встроенных стилей?
Пример:
<a href="#" onclick="location.href='http://www.google.com'; return false;" style="hover:text-decoration:none;">Google</a>
Я знаю, что вышеупомянутый HTML не будет работать, но есть ли что-то подобное, что будет?
P.S. Я знаю, что должен использовать внешнюю таблицу стилей, и я это делаю. Мне было просто любопытно, можно ли это сделать, используя встроенные стили.
Нет, это невозможно. В документах, которые используют CSS, встроенный атрибут style может содержать только объявления свойств; тот же набор операторов, который появляется в каждом наборе правил в таблице стилей. Из Спецификация атрибутов стиля:
Значение атрибута style должно соответствовать синтаксису содержимого блока объявлений (за исключением разделительных фигурных скобок), формальная грамматика приведен ниже в терминах и соглашениях основной грамматики CSS:
declaration-list : S* declaration? [ ';' S* declaration? ]* ;
Разрешены ни селекторы (включая псевдоэлементы), ни правила, ни любая другая конструкция CSS.
Подумайте о встроенных стилях в качестве стилей, применяемых к некоторому анонимному супер-специфическому селектору ID: эти стили применяются только к одному элементу с атрибутом style. (Они имеют приоритет над селектором ID в таблице стилей, если этот элемент имеет этот идентификатор.) Технически это не работает; это просто поможет вам понять, почему атрибут не поддерживает стили псевдокласса или псевдоэлемента (он больше связан с тем, как псевдоклассы и псевдоэлементы предоставляют абстракции дерева документов, которые не могут быть выражены в язык документа).
Обратите внимание, что встроенные стили участвуют в одном и том же каскаде в качестве селекторов в наборах правил и имеют наивысший приоритет в каскаде (!important несмотря на это). Поэтому они имеют приоритет даже над псевдоклассовыми состояниями. Предоставление псевдоклассов или любых других селекторов в встроенных стилях могло бы ввести новый каскадный уровень, а вместе с ним и новый набор осложнений.
Обратите также внимание на то, что очень старые версии спецификации атрибутов стиля первоначально предлагали разрешить это, однако она была пересмотрена, предположительно по причине, указанной выше, или потому, что ее реализация не был жизнеспособным вариантом.
Не CSS, а встроенный:
<a href="#"
onmouseover = "this.style.textDecoration = 'none'"
onmouseout = "this.style.textDecoration = 'underline'">Hello</a>
Вместо того, чтобы требовать встроенного, вы можете использовать встроенный CSS
<a href="#" onclick="location.href='http://www.google.com'; return false;" style="hover:text-decoration:none;">Google</a>
У вас может быть:
<a href="#" onclick="location.href='http://www.google.com'; return false;" id="gLink">Google</a>
<style>
#gLink:hover {
text-decoration: none;
}
</style>