为不同的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;
}