仅将未知（在编程时）样式表应用于一个 div

Question

我希望能够拥有一个系统，可以动态加载静态 HTML 页面（开发人员在编程时不知道），并且将该样式表仅应用于一个 DIV。

有一些问题解决了如何在某些指定设置中执行此操作，例如将 Bootstrap CSS 应用于一个 DIV（仅在一个 Div 中应用样式表，仅将 CSS 样式表应用于一个 Div），但不应用于未知样式表.

我理想地希望能够添加 CSS，如以下伪代码：

div.foreign-style-sheet
    {
    /* Contents of original stylesheet included at runtime. */
    }

但我在上述案例中提到的特定样式表中没有找到类似方法的建议。

鉴于作用域样式表显然已被弃用，是否有一种干净的方法可以做到这一点？或者 Python 是否有一种干净的方法可以将所有选择器从

foo

更改为

div.foreign-style-sheet foo

？后者是我还没有深入探索如何做的事情，但是是否有一种干净且未弃用的前端方法可以使样式表仅适用于某个范围，或者我应该进行服务器端（Python）改编可以输入 CSS 并在每个选择器前面添加给定的字符串吗？

Answer 1

假设原始样式表包含以下内容：

h1 {color: blue;}
p {color: red;}

并且您希望能够使用 Ajax 将这些规则导入到另一个文档中，并将它们嵌套在适用于单个

div

的样式规则中，如下所示：

div.foreign-style-sheet {
  h1 {color: blue;}
  p {color: red;}
}

CSS 最近添加了对此类嵌套的支持，并且所有主要浏览器的当前版本现在也支持它。因此，如果您愿意忽略旧版浏览器，您可能可以使上述工作正常进行。

否则，您可以使用正则表达式进行一些字符串处理，以查找原始样式表中的所有选择器，并在所有选择器前面添加

div.foreign-style-sheet

。

div.foreign-style-sheet h1 {color: blue;}
div.foreign-style-sheet p {color: red;}