我如何通过编程方式更改CSS以限制其范围

Question

我有一块CSS作为字符串，我想将其插入DOM中，以便它仅适用于特定容器中的元素。例如，某些工具，例如聚合物，例如重写CSS选择器，因此它们仅在有限的范围内应用。我如何做类似的事情，以便当我将此CSS插入DOM时，它不会更改页面上的所有元素？

要使它更具体，请想象外部来源的以下HTML和CSS：

<style>p { font-size: 20px; }</style>
<p>Boo.</p>

我想将这些元素插入#container元素中，但是我不想更改所有<p>元素的字体大小。我想重写该<style>元素内部的所有选择器，因此它们仅应用于#container（p-> #container p等）。如何？

Answer 1

使用https://github.com/reworkcss/css来解析CSS，然后更改选择器，最后串制：

const CSS = require('css');
function scopeCSS(css, scope) {
  const ast = CSS.parse(css);
  for (let rule of ast.stylesheet.rules) {
    if (rule.type == 'rule') {
      rule.selectors = rule.selectors.map(selector => `${scope} ${selector}`);
    }
  }
  return CSS.stringify(ast);
}
scopeCSS('div { color: black; }', '#foo');
// #foo div {
//   color: black;
// }

http://requirebin.com/?gist=trevordixon/839D0674531DAFA98FB95AE51474245E