具有内联样式的伪类

有没有可能使用内联样式创建伪类？

例如:

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

我知道上面的 HTML 不会工作，但是有类似的东西，将？

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

144237 次浏览
小开
最佳答案

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

Style 属性的值必须与 CSS 声明块内容的语法相匹配(不包括括括号) ，其形式语法在 CSS 核心语法的术语和约定中给出如下:

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

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

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

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

还要注意的是，风格属性规范 最初提议允许这个的非常老的修订版本，但是它被废弃了，可能是由于上面给出的原因，或者是因为实现它不是一个可行的选项。

小开

不是 CSS，而是内联:

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

见例子 & # x2192;

小开

不需要内联，您可以使用内部 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>
小开

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

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

演示


提交答案