css - 两个样式表以相同的特异性针对相同的元素，哪个优先？

Question

我有两个从相同的 .scss 文件构建的样式表，它们仅在几个地方不同。一个是各种风格的大师，另一个是到处都缺少一些作品。这些需要共存，它们每个都有特定的用例，并且旨在由用户下载。因为 webpack 不会自己捆绑 CSS，所以我必须导入这两个样式表，这意味着它们可能会影响我的网站。

我的 index.js 符合

import "./master.scss";
import "./specific-case.scss";

我的 webpack.config.js 符合

module.exports = {
    ...
    ...
    plugins: [
        specificCaseExtraction,
        masterExtraction,
        ...

我希望整个应用程序都使用 master.scss 样式，但是有几个地方 spceific-case.scss 会搞乱样式，尽管它们使用相同的源(优先级定义得很好与床单本身，但他们不能很好地一起玩，这只是这个演示应用程序中的一个问题，如果使用得当，永远不会出现这种情况。

基本上，我的问题可以归结为:有没有办法确保一个样式表优先于另一个样式表？这是订购的问题吗？我尝试在 index.js 中交换它们，但它没有帮助，在 webpack.config.js 中交换它们有点复杂，因为 masterExtraction 是手动调用的，而 specificCaseExtraction 实际上是许多动态注入(inject)的之一。或者，更好的是，有没有一种方法可以让 webpack 编译 .scss 并将其打包为 .css 而无需将其注入(inject)页面本身？

更新:事实证明，在具有相同特异性的情况下，工作表下方的样式会生效。这意味着颠倒列表中插件的顺序会使 master.css 出现在最终 index.html 中的 specific-case.css 下方，这意味着主样式始终优先于任何其他样式我的问题就解决了。

Answer 1

CSS 特异性按优先顺序排列。这是我迄今为止看到的最好的文章:https://css-tricks.com/specifics-on-css-specificity/

这是一个使用 LESS 而不是 SASS 的类似元素，但概念是相同的。 https://github.com/mabbashm110/Sprint-Challenge--Responsive-Less

希望对您有所帮助。