是否可以创建内联伪样式？ [复制]

Posted 2023-03-05

【中文标题】是否可以创建内联伪样式？ [复制]

【英文标题】：Is it possible to create inline pseudo styles? [duplicate]

【发布时间】：2010-11-02 11:09:20

【问题描述】：

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

例如，我可以执行以下操作吗？

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

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

【问题讨论】：

@robbotic: 假设他有一个函数 foo(string u, string color1, string color2) 输出 Coding Horror 使用内联悬停样式更简单。这是一个好主意吗？我宁愿只拥有这样一个具有某种风格的功能......但这会迫使使用我的类的人自己使用 css，这使得部署在短期内工作得稍微多一些。

@Brian 我尽可能避免使用内联样式。我知道它们的设置速度更快，但我认为如果您需要在其他地方复制相同的样式，您就会失败。我宁愿拥有一个包含我网站上所有样式的大 CSS 文件（或多个 CSS 文件）。这样我就可以轻松访问我想要的任何内容，并且可以进行一项更改并在整个网站上实现我想要的所有内容。

这样做的目的到底是什么？内联样式是对关注点分离的有害破坏。留给 CSS 吧。

您可以使用 javascript 将伪样式注入文档头部。

感谢大家的回答。我怀疑不会有真正的解决方案，只有从不同方式解决问题的各种方法。

【参考方案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>

如果你可以强制你的用户在他们的页面顶部放置一个“样式控件”，你可以在那里呈现你所有的自定义类，而不是在每个控件旁边呈现它们，这将是一件非常非常糟糕的事情（浏览器每次遇到样式块时都会重新开始渲染，有很多样式块散落在页面周围会导致渲染缓慢）。

很遗憾，这个问题没有优雅的解决方案。

【讨论】：

为什么这是一个“糟糕的”“解决方法”……这不正是 CSS 伪样式存在的原因吗？

【参考方案2】：

这有点像 Catch-22 的情况。

一方面，您可以在将元素插入页面的位置之前添加样式块，但 Chris Pebble 指出了这样做的问题。 （如果您决定这样做，请确保为您的元素选择唯一 ID，这样您的选择器就不会意外选择或设置其他任何样式）。

另一方面，你可以这样做：

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

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

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

我经常看到第一种方法（添加样式块）在大型上完成。 “模块化”门户网站会做这种事情，所以也许它是事实上的标准（它至少比在其中塞入 JavaScript 更易读，更容易维护？）。 JavaScript 方法似乎对 DOM 和整个页面的影响最小，因为您将演示文稿留给自己。

这是您选择的每个答案在某种程度上都是错误的前端开发困境之一，因此请权衡选项并选择最容易构建和维护的选项。

【讨论】：

是的，我认为你的最后一段总结了它:)

【参考方案3】：

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

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

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

#a1:hover 
  color:blue

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

【参考方案4】：

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

【参考方案5】：

您可以发送带有构建页面的静态样式表，该页面使用 css 变量来控制特定状态并在您的脚本中生成这些状态。遗憾的是，您必须为要使用的每个州和财产都这样做。

* 
  background-color: var(--n-background-color);


:hover 
  background-color: var(--hover-background-color);

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

为避免使用 !important，我们不能直接内联定义正常状态。

【参考方案6】：

或者你可以使用jQuery的hover函数并设置背景颜色。