Javascript 如何动态创建可由早期规则覆盖的css样式规则

我一直在我的项目中使用动态样式。这在大多数情况下都很有效，但我想做一些似乎没有帮助的事情

我希望能够首先创建一组主样式规则，然后创建一组默认样式规则，如果主样式规则冲突，则可以覆盖这些规则。例如：

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

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

即使在早期样式表中添加了红色样式，id为“A”的元素仍保持绿色。现在我只是想知道我是否可以用jss来做这件事，或者我是否需要自己做点什么

为什么这不起作用

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

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

使用CSS选择器 您可以非常简单地执行此操作，只需使用多类选择器：

jss.set('.defaultClass1.mainClass1', {...});

这比

.defaultClass

选择器具有更高的类特定性

---

使用JSS扩展插件 这简化了扩展样式。例如，您可以这样做（从存储库中的示例复制）

var button0 = {
    padding: '20px',
    background: 'blue'
}

var redButton = {
    background: 'red'
}

window.styles = {
    button0: button0,
    button1: {
        extend: [button0, redButton],
        'font-size': '20px'
    }
}

---

这将

button0

和

button1

样式注册到当前窗口（就像链接CSS文件一样）.

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

---

“阅读源代码”

好吧，我知道如何使用jss：

<div id="a">A div</div>
<script>
    var jss1 = jss.forDocument(document)
    jss1.defaultSheet = jss1._createSheet()
    var jss2 = jss.forDocument(document)
    jss2.defaultSheet = jss2._createSheet()

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

A div
var jss1=jss.forDocument（文档）
jss1.defaultSheet=jss1.\u createSheet（）
var jss2=jss.forDocument（文档）
jss2.defaultSheet=jss2.\u createSheet（）
jss2.set（“#A”{
颜色：“绿色”
})
jss1.set（“#A”{
颜色：“红色”
})

---

我发现jss懒洋洋地创建它的表单。因此，如果你想确保样式表的顺序，你需要使用_createSheet预先创建它们。

“我希望结果是文本是红色的，但jss的操作方式是红色的。”打字？意外，而不是打字；）-修复了，谢谢！将规则插入到文档前面出现的样式表中，以允许后续规则以相同的特定性层叠到添加的属性上。听起来每个人都有我的想法。如何在@dandavis实现这一点？在附加JSS后运行此命令：

document.head.insertBefore（[].slice.call（document.querySelectorAll（“style”））.pop（），document.head.firstChild）

或只是在空白处加上前缀，将innerHTML设置为css，不要使用JSS。或者你可以用JSS挂载新的标签，从来没有用过它…这不是我想要的。我希望mainClass1和defaultClass1自动混合在一起。如果我想手工编写所有样式，我不会使用jss。那么，为什么不使用jss的扩展选项呢？有一个扩展插件：啊，看起来这个插件也不符合我的要求。我实际上正在构建一个样式系统。在该系统中，可以创建渲染到样式表中的样式对象。系统中的对象可以具有放置在其自身上的默认样式。因为可以在具有默认样式的对象之前创建常规样式，所以jss会在发生这种情况时使默认样式覆盖常规样式。我想使用css的常规级联将样式混合在一起，这样系统中就不会有十亿个不同的类。好吧，那么我放弃，希望其他人能回答你的问题。无论如何，谢谢你的帮助！这正是我在问题中提到的想法。这个想法行得通吗，还是你只是像我一样猜测？我尝试了一个测试，创建了两个不同的jss对象，每个对象都应该创建自己的工作表。没用，你知道怎么用吗？我看你明白了。你的实验证实了我的怀疑。做得好。如果我的回答有帮助，请验证一下。嗯，老实说，告诉我“从源头上阅读”并没有多大帮助。更不用说我已经这样做了，在我最初的问题中，我已经阐述了你在回答中所写的想法。所以，不，对不起。你的回答没有帮助。

<div id="a">A div</div>
<script>
    var jss1 = jss.forDocument(document)
    jss1.defaultSheet = jss1._createSheet()
    var jss2 = jss.forDocument(document)
    jss2.defaultSheet = jss2._createSheet()

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