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

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让它在其他浏览器中工作。