html - 具有内联样式的 CSS 伪类

标签 html css css-selectors pseudo-class inline-styles

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


例子:

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

我知道上面的 HTML 行不通,但是否有类似的东西可以工作?

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

最佳答案

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

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces), whose formal grammar is given below in the terms and conventions of the CSS core grammar:

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

选择器(包括伪元素)、at 规则和任何其他 CSS 结构都是不允许的。

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

请注意,内联样式与规则集中的选择器参与相同的级联,并且在级联中具有最高优先级(尽管如此,!important)。所以他们甚至比伪类(Class)国家更重要。在内联样式中允许伪类或任何其他选择器可能会引入新的级联级别,并随之带来一系列新的复杂性。

另请注意样式属性规范的非常旧的修订版 did originally propose allowing this ,但是它被废弃了,大概是由于上面给出的原因,或者因为实现它不是一个可行的选择。

关于html - 具有内联样式的 CSS 伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5293280/

相关文章:

css - :nth-child(n):before is doesn't working?

css - 结合 float 和 nth-child 清除行为和动态隐藏框

至少有 N 个 child 的节点的 CSS 选择器?

php - Laravel - HTML POST 表单,找不到页面

c# - 为 MVC 中文本框的占位符属性提供数据注释

html - 倾斜类按钮中的文本不倾斜

html - Safari 浏览器的背景色保持白色

css - 在 WordPress 主题中对齐的选项卡中心

javascript - 此 Bootstrap 按钮下拉菜单不起作用。但为什么?

c# - 使用 <%= %> 时的不同输出