覆盖 z-index答案

【问题标题】：Override z-index覆盖 z-index
【发布时间】：2021-06-17 20:05:01
【问题描述】：

我正在为暗模式使用 darkmode.js https://darkmodejs.learn.uno/ 库。它使用 css mix-blend-mode 来引入暗模式。当我手动检查时，它会将transform : scale(1) 应用于暗模式。

 <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
    <script>
      function addDarkmodeWidget() {
        new Darkmode().showWidget();
      }
      window.addEventListener('load', addDarkmodeWidget);
    </script>

它不适用于引导程序的组件（尤其是小部件），因此我按照文档使用它。

.darkmode-layer, .darkmode-toggle {
  z-index: 500;
}

现在我想在暗模式下忽略一些小部件的 CSS，例如按钮（类 .btn-primary）。我想在暗模式下显示按钮的实际颜色。我试过 darkmode-ignore 、 isolation:isolate、mix-blend-mode: difference; 但它不起作用。

结帐 jsfiddle 链接 - https://jsfiddle.net/27b06hy9/ 我想在深色模式下将按钮的背景颜色（使用 .btn-primary 类）显示为蓝色。其余按钮可以在暗模式下显示。

【问题讨论】：

你用过!important吗？也添加一些 HTML。
是的，但没有成功
我也打算建议 !important，但那是在黑暗中拍摄的。如果您创建了一个完整的页面来显示您的问题（例如使用 jsfiddle），将会有所帮助。
我刚刚使用了一些 bootstrap 4 组件和 darkmodejs。它按预期工作。你可能没有按正确的顺序使用你的 css + js 链接。
谢谢。我正在使用 bootstrap 3。你介意分享你的 jsfiddle 吗？

标签： javascript css twitter-bootstrap

【解决方案1】：

据我了解您的问题，您想要这样的东西吗？

只需在 css 中的 darkmode-toggle 类之前添加“按钮”

button .darkmode-layer, .darkmode-toggle {
  z-index: 500;
}

你也可以玩弄权力

all:unset!important;

【讨论】：

TIL 关于 CSS 中的 all。
谢谢。我正在尝试使用 .btn-primary 类使其具体化。我将您的代码“按钮”更改为“.btn-primary”，但它不起作用
“有时从头开始设计样式比与已经存在的所有内容作斗争要容易得多。” -css 技巧
明白了。你对此没有答案。谢谢！