it-swarm.com.ru

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

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


Пример:

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

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

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

113
Web_Designer

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

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

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

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

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

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

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

107
BoltClock

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

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

См. Пример →

41
mVChr

Вместо того, чтобы нуждаться во встроенном, Вы могли бы использовать Внутренний 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>
24
Jim Doodle