为什么 CSS 中的 :not 选择器在没有指定元素的情况下不能工作？ [复制]答案

【问题标题】：Why doesn't the :not selector in CSS work without a specified element? [duplicate]为什么 CSS 中的 :not 选择器在没有指定元素的情况下不能工作？ [复制]
【发布时间】：2021-06-01 08:03:06
【问题描述】：

我有以下sn-p，其中段落的显示取决于容器是否具有.dark-mode类。

function toggleDarkMode() {
  const container = document.getElementById("container");
  container.classList.toggle("dark-mode");
}

:not(.dark-mode) .dark-mode-only {
  display: none;
}
.dark-mode .light-mode-only {
  display: none;
}

<div id="container">
  <p class="light-mode-only">
    Only for light mode.
  </p>
  <p class="dark-mode-only">
    Only for dark mode.
  </p>
  <button onclick="toggleDarkMode()">Toggle dark mode</button>
</div>

如您所见，单击按钮会将.dark-mode 类添加到容器中，但:not(.dark-mode) .dark-mode-only {...} 选择器实际上不起作用。但是，如果我只是在此语句前面添加div，它会再次起作用：

function toggleDarkMode() {
  const container = document.getElementById("container");
  container.classList.toggle("dark-mode");
}

div:not(.dark-mode) .dark-mode-only {
  display: none;
}
.dark-mode .light-mode-only {
  display: none;
}

<div id="container">
  <p class="light-mode-only">
    Only for light mode.
  </p>
  <p class="dark-mode-only">
    Only for dark mode.
  </p>
  <button onclick="toggleDarkMode()">Toggle dark mode</button>
</div>

那么这里的问题到底是什么？ :not 选择器是否仅在它之前指定元素时才起作用？感谢您的帮助。

编辑即使使用*:not(.dark-mode) 之类的东西也不起作用。

【问题讨论】：

改用*:not( ... )。
@MMD 不起作用
嗯.....但是这里说它应该可以工作。 w3schools.com/cssref/sel_not.asp
@MMD W3Schools 有很多不好的例子和代码。
@JoãoHamerski 我认为你错过了问题的重点。

标签： html css

【解决方案1】：

:not(.dark-mode) 将匹配任何不是.dark-mode 的内容，包括<html> 和<body>。

所以这个

:not(.dark-mode) .dark-mode-only {
  display: none;
}

解析为body .dark-mode-only 并隐藏您的文本。

说明

在使用 :not() 时有几个不寻常的效果和结果，您在使用时应牢记：

:not(.foo) 将匹配任何不是 .foo 的内容，包括 and .

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

【讨论】：

所以基本上没有办法通配这种类型的否定？
我会反其道而行之，隐藏暗模式的文本，直到它位于 darkmode 对象中。其实对于暗模式的情况，媒体查询prefers-color-scheme可能是更好的选择