具有内联样式的 CSS 伪类

发布于 2024-10-21 11:29:20 字数 252 浏览 8 评论 0原文

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


示例:

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

我知道上面的 HTML 不起作用,但是有类似的东西可以吗?

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

Is it possible to have pseudo-classes using inline styles?


Example:

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

I know the above HTML won't work but is there something similar that will?

P.S. I know I should use an external style sheet, and I do. I was just curious if this could be done using inline styles.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

马蹄踏│碎落叶 2024-10-28 11:29:21

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

样式属性的值必须与 CSS 内容的语法相匹配 声明块(不包括定界大括号),其正式语法在下面的 CSS 核心语法

声明列表
  : S* 声明? [ ';' S*声明? ]*
  ;

不允许使用选择器(包括伪元素)、at 规则或任何其他 CSS 构造。

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

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

另请注意,样式属性规范的非常旧的修订最初确实建议允许这样做,但它是被废弃,大概是由于上述原因,或者因为实施它不是一个可行的选择。

No, this is not possible. In documents that make use of CSS, an inline style attribute can only contain property declarations; the same set of statements that appears in each ruleset in a stylesheet. From the 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? ]*
  ;

Neither selectors (including pseudo-elements), nor at-rules, nor any other CSS construct are allowed.

Think of inline styles as the styles applied to some anonymous super-specific ID selector: those styles only apply to that one very element with the style attribute. (They take precedence over an ID selector in a stylesheet too, if that element has that ID.) Technically it doesn't work like that; this is just to help you understand why the attribute doesn't support pseudo-class or pseudo-element styles (it has more to do with how pseudo-classes and pseudo-elements provide abstractions of the document tree that can't be expressed in the document language).

Note that inline styles participate in the same cascade as selectors in rule sets, and take highest precedence in the cascade (!important notwithstanding). So they take precedence even over pseudo-class states. Allowing pseudo-classes or any other selectors in inline styles would possibly introduce a new cascade level, and with it a new set of complications.

Note also that very old revisions of the Style Attributes spec did originally propose allowing this, however it was scrapped, presumably for the reason given above, or because implementing it was not a viable option.

风追烟花雨 2024-10-28 11:29:21

不是 CSS,而是内联:

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

查看示例 →

Not CSS, but inline:

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

See example →

杀お生予夺 2024-10-28 11:29:21

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

Rather than needing inline you could use Internal CSS

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

You could have:

<a href="http://www.google.com" id="gLink">Google</a>
<style>
  #gLink:hover {
     text-decoration: none;
  }
</style>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文