Question

我有一个<style>元素应用了一些全局样式，例如A { color: red }，而不是我的样式表A { color: green }（仅作为示例）。

如何修改<style>元素中的所有样式以便“包含”并仅将样式应用于我指定的父元素的子元素。

A { color: red }变为#myelem A { color: red }

.myclass { display: none; }变为#myelem .myclass { display: none }

我是否必须找到<style>元素，解析内容，替换每个选择器然后用它修复元素内容？

是否可以替代修改<style>元素的内容？

为什么我要这样做？我的HTML存储在我想要编辑的数据库中（这是一个CMS）。 HTML可以包含<style>个元素，我无法信任谁编写CSS以在范围内编写它。我可以阻止用户使用<style>元素，但我宁愿不这样做。 我无法控制原始CSS 。只有我在服务器/客户端代码中获得的内容。

如果所有其他方法都失败了，我可能需要将其加载到iFrame中...... :(

Ooooooo Firefox支持<style scoped>，它仅适用于<style>元素位于DOM中的父级。太糟糕了，任何其他浏览器都不支持它。：（

Answer 1

正如您所提到的，您可以使用：

<style scoped>
...
</style>

虽然它仅在Firefox中本机支持，但您可以使用此jQuery polyfill使其在其他浏览器中运行。

Answer 2

使用child选择器：

#yourElement > a { color: green; }

Answer 3

JQuery的：

$( "parent_type > children_type" ).css("param","value");

例如

$( "#myid > div" ).css("display","none");

here是一个链接

JSFiddle

将<style>规则应用于另一个元素</style>

3 个答案: