Html 带有内联样式的 CSS 伪类

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5293280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 07:20:35  来源:igfitidea点击:

CSS Pseudo-classes with inline styles

htmlcsscss-selectorspseudo-classinline-styles

提问by Web_Designer

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?

我知道上面的 HTML 不起作用,但有没有类似的东西?

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.

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

采纳答案by BoltClock

No, this is not possible. In documents that make use of CSS, an inline styleattribute can only contain property declarations; the same set of statements that appears in each ruleset in a stylesheet. From the Style Attributes spec:

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

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? ]*
  ;

style 属性的值必须匹配 CSS声明块内容的语法(不包括定界大括号),其形式语法在下面的CSS 核心语法的术语和约定中给出:

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

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

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

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 styleattribute. (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).

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

Note that inline styles participate in the same cascade as selectors in rule sets, and take highest precedence in the cascade (!importantnotwithstanding). 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.

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

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.

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

回答by mVChr

Not CSS, but inline:

不是 CSS,而是内联:

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

See example →

参见示例 →

回答by Jim Doodle

Rather than needing inline you could use Internal CSS

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