Question

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

示例：

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

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

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

Answer 1

不，这是不可能的。在使用CSS的文档中，内联style属性只能包含属性声明;样式表中每个规则集中出现的同一组语句。来自Style Attributes spec：

style属性的值必须与CSS declaration block的内容语法相匹配（不包括分隔大括号），其正式语法在CSS core grammar的术语和约定中给出：
declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

既不允许选择器（包括伪元素），也不允许at-rules，也不允许任何其他CSS构造。

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

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

还要注意样式属性规范did originally propose allowing this的非常旧版本，但是它被废弃了，大概是出于上面给出的原因，或者因为实现它不是一个可行的选项。

Answer 2

不是CSS，而是内联：

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

See example →

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>

Demo

Answer 5

或者你可以简单地在内联 css 中尝试这个

<textarea style="::placeholder{color:white}"/>

具有内联样式的CSS伪类

5 个答案: