是否可以创建内联伪样式？

Question

是否可以创建内联伪样式？

例如,我可以做以下事情吗？

<a href="#" style="background-color:green;{hover:background-color:red;}">Coding Horror</a>

这背后的原因是我正在开发一个创建UI元素的.NET库.我想生成可以在不使用外部样式表的情况下设置悬停状态的HTML元素.

Answer 1

不幸的是,你不能使用内联CSS实现悬停效果.

解决此问题的一个(糟糕的)解决方法是让控件在渲染时呈现样式块.例如,您的控件可以呈现为:

<style type="text/css">
    .custom-class { background-color:green; }
    .custom-class:hover { background-color:Red; }
</style>
<a href="#" class="custom-class">Coding Horror</a>

如果您可以强制用户在其页面顶部删除"样式控件",则可以在那里呈现所有自定义类,而不是在每个控件旁边呈现它们,这将是非常非常糟糕的事情(浏览器将重新开始渲染每次遇到样式块时,页面周围散布着很多样式块会导致渲染速度变慢.

不幸的是,这个问题没有优雅的解决方案.

Answer 2

这是一种Catch-22的情况.

一方面,您可以在元素插入页面之前添加样式块,但Chris Pebble指出了问题.(如果您决定这一点,请确保为您的元素选择唯一的ID,以便您的选择器不会意外地选择或设置其他任何内容).

另一方面,你可以做这样的事情:

<a href="#" onmouseover="this.style.color=red;" onmouseout="this.style.color='blue';">...</a>

但是,这本身就是令人讨厌的,因为它将标记,表示,行为和一大堆其他东西联系在一起.

您还可以通过写出链接标记或操作document.stylesheets将样式表注入页面,但这会触发下载.

我经常看到第一种方法(添加样式块)在大型上完成."模块化"门户网站就是这样做的,所以也许它是事实上的标准(它至少比在那里塞满JavaScript更具可读性,也许更容易维护？).JavaScript方法似乎对DOM和整个页面的影响最小,因为您将自己的演示文稿保留给自己.

这是前端开发中的一个,你选择的每个答案在某种程度上都是错误的,因此权衡选项并选择最容易构建和维护的选项.