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和整个页面的影响最小，因为您将自己的演示文稿保留给自己。

这是前端开发者之一，你选择的每个答案在某种程度上都是错误的，所以权衡选项并选择最容易构建和维护的答案。

Answer 3

我会在解析所有控件时动态创建一个CSS文件，并且我会在包含悬停或其他伪类样式的控件中添加服务器端属性。

<a style="color:blue" styleHover="color:blue" id="a1">Click!</a>

您的代码可以查找这些属性并动态生成css文件

#a1:hover {
  color:blue
}

我不知道.NET是否允许你对属性进行这种类型的解析，但我在为php创建的框架中做了类似的事情。

Answer 4

Hacss有效地将伪选择器引入内联样式。

Answer 5

或者您可以使用jQuery的hover功能并设置背景颜色。

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

5 个答案: