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

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

114 голосов
/ 14 марта 2011

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

Пример: 

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

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

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

Ответы [ 3 ]

107 голосов
/ 14 марта 2011

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

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

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

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

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

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

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

41 голосов
/ 14 марта 2011

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

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

См. Пример & # x2192;

25 голосов
/ 11 февраля 2015

Вместо встроенного вы можете использовать Internal 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>
...