具有内联样式的 CSS 伪类

Posted 2023-03-06

【中文标题】具有内联样式的 CSS 伪类

【英文标题】：CSS Pseudo-classes with inline styles

【发布时间】：2011-07-14 16:15:36

【问题描述】：

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

---

例子：

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

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

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

【问题讨论】：

Is is possible to create inline pseudo styles? 的可能重复项

【参考方案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 的非常旧的修订版，但它已被废弃，可能是由于上述原因，或者因为实施它不是一个可行的选择。

【参考方案2】：

不是 CSS，而是内联：

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

See example →

【讨论】：

是的，我想这是另一种选择。它不是 CSS，但它适用于 :hover 使用 mouseover 和 mouseout， :focus 使用 onfocus 和 onblur 以及 :active 使用 onclick。

这算作javascript吗？我有一个需要内联 CSS 而没有 Javascript 的项目。

是的，这是 javascript。

这是一个不错的选择。使用外部 CSS 表违反了 OO（面向对象）原则。元素的样式应该与元素放在一起。

内联样式的另一点是通过使用虚拟 DOM 来降低渲染时间。 CSS 需要扫描整个文档以查找更改并应用其样式。这被内联样式消除了。

【参考方案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>

【讨论】：

是否可以在head元素外使用内部css？

@Thaina 现在在 HTML5 中：html5doctor.com/the-scoped-attribute

@Thaina 有趣，遇到了另一个问题，我决定做这样的事情，发现 scoped 属性已从规范中删除......developer.mozilla.org/en/docs/Web/HTML/Element/style

【参考方案4】：

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

<a href="http://www.google.com" class=":hovertext-decoration:none;">Google</a>

Demo