将外部样式表应用于特定部分

Question

在我的网站上，我允许用户生成样式表。但我不希望这些样式影响整个网站，只想影响一个单独的部分/ div。有没有方法可以做到这一点，而不必在每个CSS规则中添加我的div选择器，也不必经过整个自定义样式表？

例如，如果用户有以下样式：

a, span{color:white;}
div{padding:10px;}

现在我需要解析它并替换为

#mySection a, #mySection span{color:white;}
#mySection div{padding:10px;}

- Maksim Vi.

---

我认为你必须正确解析CSS（非常困难），或者使用一个iframe。 - thirtydot

Answer 1

很抱歉，没有类似于<base>标签的CSS等效项，可以限制CSS规则的作用范围。您需要在每个规则前面添加要应用它们的元素，或者在iframe中加载用户样式内容。

- Pekka

---

我也是这么想的，你能否告诉我上面的解决方案是否可行或者可能存在一些潜在漏洞？ - Maksim Vi.

@negative：第一个问题 - 你会去掉 !important 吗？ - thirtydot

@negative 上面的解决方案看起来对我来说还不错。如果您在每个规则前都加上 #mySection，我想不到会有什么漏洞。 - Pekka

@thirtydot 不，但既然“修改”选择器的作用域是#mySection，那真的很重要吗？ - Maksim Vi.

@negative：这取决于您的“修改”选择器解析有多强大。例如，它能否很好地抵御此类内容*(例如)：http://centricle.com/ref/css/filters/ - 这取决于您有多在意阻止恶意用户*的行为。 - thirtydot

@thirtydot 不错的链接！确实，@import指令是需要注意的一件事情（=剥离）。此外，对于像/*/*//*/property:value;/* *这样的恶作剧进行测试是一个好主意。 - Pekka