Question

我有一大块CSS作为字符串，我想将它插入到DOM中，以便它只适用于特定容器中的元素。某些工具（例如Polymer）会重写CSS选择器，因此它们仅适用于有限的范围。我怎样才能做类似的事情，这样当我将这个CSS插入DOM时，它不会改变页面上的所有元素？

为了使其更具体，想象一下来自外部源的以下HTML和CSS：

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

我想将这些元素插入到#container元素中，但我不想更改所有<p>元素的字体大小。我想重写<style>元素中的所有选择器，因此它们仅适用于#container（p - ＆gt; #container p等）。怎么样？

Answer 1

使用https://github.com/reworkcss/css解析CSS，然后改变选择器，最后用stringify：

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

如何以编程方式更改CSS以限制其范围？

1 个答案: