为不同的HTML文档元素使用具有相同规则名称的不同CSS工作表

Question

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

这是我想要做的事情的一个例子。拿下面的两个样式表：

style1.css：

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

style2.css：

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

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

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

Answer 1

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

您应该将不同的小部件与不同的类或ID区分开来，然后您就不会有相同的规则。

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

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

Answer 2

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

Answer 3

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

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

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

#widget-one .size { ... }

#widget-two .size { ... }

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

Answer 4

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

Answer 5

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