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

I need a way to load multiple style sheets with the same rule names, and then apply them to different elements on a page. Is this possible?

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

Here's an example of something I'd like to do. Take the two style sheets below:

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

style1.css:

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

style2.css:

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

I would like to be able to import both of them into a page (perhaps with an id of some sort), and then set the text inside one particular div to use the rules from style1.css and another div should use the rules from style2.css.

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

I need to do things this way because it will allow users of my application to upload custom style sheets for different widgets on a page. This scheme should work, provided that the sheets use the same rule naming scheme.

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

5 个解决方案

#1

The answer is no you can't do it this way. The rule loaded last will take precedence.

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

You should differentiate the different widgets with different classes or IDs, and then you won't have the same rules.

您应该使用不同的类或ID区分不同的小部件,然后您将没有相同的规则。

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

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

#2

Maybe you can put each widget within an iframe. In that iframe you would call the custom stylesheet for that widget. That way you would win more modularity as well as allowing you to do what you want directly, without worrying about cheats to go around the problem.

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

#3

To directly answer your question, "No". The CSS code itself would have to have some kind of context.

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

As for "it will allow users of my application to upload custom style sheets for different widgets on a page" - the way I read that, I suggest something like wrapping each widget in a unique ID or similar.

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

Then, users could upload stylesheets with a bit of context, but still the same basic names, as:

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

#widget-one .size { ... }

#widget-two .size { ... }

But some kind of context/prefix is necessary.

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

#4

If you do this the rule declared in the stylesheet that is loaded last will apply to all elements that it matches.

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

#5

Maybe you could use something like jQuery to remove the default page CSS and replace it with the users stylesheet, basically swapping the stylesheet on the client-side.

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

#1