javascript - 如何动态创建可被早期规则覆盖的 css 样式规则

Question

我一直在使用jss在我的元素中做动态样式。这在大多数情况下都非常有效，但我想做一些它似乎无济于事的事情。

我希望能够首先创建一组主要样式规则，然后创建一组默认样式规则，如果它们发生冲突，这些默认样式规则可以被主要样式规则覆盖。示例:

<div class="mainClass1 defaultClass1">text</div>
<script>
jss.set('.mainClass1', {
  color: 'red'
})

jss.set('.defaultClass1', {
  color: 'green'
})
</script>

我希望结果是文本是红色的，但是 jss 的运行方式，文本是绿色的。我希望我能以某种方式创建两个动态样式表，第一个是“默认”表，第二个是“主”表(以便主要覆盖默认值)。这可能吗？

更新 - 我确认了一种适用于原始 javascript 的技术:

var styleNode = document.createElement('style');
styleNode.type = 'text/css';
styleNode.rel = 'stylesheet';
document.head.appendChild(styleNode);
//styleNode.sheet.insertRule("#A" + ' { color:green; }', 1);

var styleNode2 = document.createElement('style');
styleNode2.type = 'text/css';
styleNode2.rel = 'stylesheet';
document.head.appendChild(styleNode2);
styleNode2.sheet.insertRule("#A" + ' { color:green; }', 0);
styleNode.sheet.insertRule("#A" + ' { color:red; }', 0);

即使在较早的样式表上添加了红色样式后，id 为“A”的元素仍保持绿色。现在我只是想知道我是否可以使用 jss 来做到这一点，或者我是否需要推出自己的东西。

为什么这不起作用？

var jss1 = jss.forDocument(document)
var jss2 = jss.forDocument(document)

jss2.set('#A', {
    color: 'green'
})
jss1.set('#A', {
    color: 'red'
})

Answer 1

对 jss 源代码的简要检查使我相信您的答案在于创建不同的样式表。从我的简短阅读来看，后来创建的样式表中的 CSS 似乎覆盖了先前创建的样式表中的 CSS。

“阅读源码”