148

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

例子：

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

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

PS我知道我应该使用外部样式表，我确实这样做了。我只是好奇这是否可以使用内联样式来完成。

4

4 回答 4

128

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

style 属性的值必须匹配 CSS声明块内容的语法（不包括分隔大括号），其形式语法在CSS 核心语法的术语和约定中给出：

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

选择器（包括伪元素）、at-rules 和任何其他 CSS 构造都是不允许的。

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

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

另请注意，样式属性规范的非常旧的修订版最初确实建议允许 this，但是它被废弃了，大概是由于上面给出的原因，或者因为实现它不是一个可行的选择。

于 2011-03-13T23:37:03.187 回答
52

不是 CSS，而是内联：

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

查看示例 →

于 2011-03-14T00:07:52.767 回答
30

而不是需要内联，您可以使用内部 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>
于 2015-02-11T12:24:35.347 回答
4

你可以试试https://hacss.io：

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

演示

于 2020-06-23T18:20:06.747 回答