具有内联样式的CSS伪类

Question

是否可以使用内联样式的伪类？

---

例:

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

我知道上面的HTML不起作用但有类似的东西吗？

PS我知道我应该使用外部样式表,我这样做.如果可以使用内联样式完成,我只是很好奇.

Answer 1

不,这是不可能的.在使用CSS的文档中,内联style属性只能包含属性声明; 样式表中每个规则集中出现的同一组语句.从样式属性规范:

style属性的值必须与CSS 声明块的内容语法(不包括分隔大括号)相匹配,其形式语法在CSS核心语法的术语和约定中给出:

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

既不允许选择器(包括伪元素),也不允许at-rules,也不允许任何其他CSS构造.

将内联样式视为应用于某些匿名超特定ID选择器的样式:这些样式仅适用于具有该style属性的那个元素.(如果该元素具有该ID,它们也优先于样式表中的ID选择器.)从技术上讲,它不能像那样工作; 这只是为了帮助您理解为什么该属性不支持伪类或伪元素样式(它更多地与伪类和伪元素如何提供无法表达的文档树的抽象有关.文件语言).

请注意,内联样式与规则集中的选择器参与相同的级联,并且在级联中具有最高优先级(!important尽管如此).所以它们甚至优先于伪类状态.允许内联样式中的伪类或任何其他选择器可能会引入新的级联级别,并带来一组新的复杂性.

还要注意,样式属性规范的非常旧版本最初建议允许这样做,但是它被废弃了,可能是出于上面给出的原因,或者因为实现它不是一个可行的选择.

Answer 2

不是CSS,而是内联:

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

见例→

Answer 3

您可以使用内部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>

Answer 4

您可以尝试https://hacss.io：

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

演示