对不同的 HTML 文档元素使用具有相同规则名称的不同 CSS 表答案

【问题标题】：Using different CSS sheets with the same rule names for different HTML document elements对不同的 HTML 文档元素使用具有相同规则名称的不同 CSS 表
【发布时间】：2010-10-30 16:46:39
【问题描述】：

我需要一种方法来加载具有相同规则名称的多个样式表，然后将它们应用于页面上的不同元素。这可能吗？

这是我想做的一个例子。取下面的两个样式表：

style1.css：

.size{
    color: #FF6600;
    font-size: 18px;
}

style2.css：

.size{
    color: #FF0000;
    font-size: 14px;
}

我希望能够将它们都导入页面（可能带有某种 id），然后将文本设置在一个特定 div 中以使用 style1.css 中的规则，而另一个 div 应该使用来自 style2.css 的规则。

我需要这样做，因为它允许我的应用程序的用户为页面上的不同小部件上传自定义样式表。如果工作表使用相同的规则命名方案，该方案应该可以工作。

【问题讨论】：

标签： javascript css html styles

【解决方案1】：

直接回答您的问题，“否”。 CSS 代码本身必须有某种上下文。

至于“它将允许我的应用程序的用户为页面上的不同小部件上传自定义样式表”——按照我的阅读方式，我建议将每个小部件包装在一个唯一的 ID 或类似物中。

然后，用户可以上传带有一些上下文的样式表，但基本名称仍然相同，如：

#widget-one .size { ... }

#widget-two .size { ... }

但某种上下文/前缀是必要的。

【讨论】：

看来我落后 altCognito 几秒钟，他可能给出了更全面的答案。

【解决方案2】：

也许您可以将每个小部件放在一个 iframe 中。在该 iframe 中，您将调用该小部件的自定义样式表。这样一来，您将获得更多的模块化，并允许您直接做自己想做的事情，而不必担心作弊来解决问题。

【讨论】：

iframe 选项听起来很有趣。我会探索这个，谢谢！

【解决方案3】：

也许您可以使用 jQuery 之类的东西来删除默认页面 CSS 并将其替换为用户样式表，基本上是在客户端交换样式表。

【讨论】：

【解决方案4】：

答案是否定的，你不能这样做。最后加载的规则将优先。

你应该用不同的类或ID来区分不同的小部件，这样你就不会有相同的规则了。

#widgetB .size{
        color: #FF0000;
        font-size: 14px;
}

#widgetA .size{
        color: purple;
        font-size: 10px;
}

【讨论】：

这可能行得通——唯一的问题是用户必须事先知道 div id，然后相应地编辑样式表。我还将探讨 fmsf 的 iframe 建议。谢谢！
Facebook 通过为您提供的 css 样式添加前缀并重写 HTML/FBML 以使用新的类/id 名称来处理应用程序。

【解决方案5】：

如果你这样做，最后加载的样式表中声明的规则将应用于它匹配的所有元素。

【讨论】：