为什么 :not() 选择器不能与 * 选择器一起使用？ [复制]答案

【问题标题】：Why is the :not() selector not working with the * selector? [duplicate]为什么 :not() 选择器不能与 * 选择器一起使用？ [复制]
【发布时间】：2019-09-20 23:48:05
【问题描述】：

我正在尝试选择所有元素，然后选择具有 btn 类的元素，但具有 navbar、footer 或 mobile-menu 类的元素除外。

我有这个代码：

*:not(.navbar):not(.footer):not(.mobile-menu) {
  .btn {
    font-size: 20px;
    padding: .8rem 2rem;
  }
}

但它不起作用。

谁能解释一下为什么？

编辑：我正在使用 sass

【问题讨论】：

您不能在 CSS 中嵌套规则（除非您使用的是 scss？如果是这样，请在您的问题中注明这一点）。将您的规则更改为*:not(.navbar):not(.footer):not(.mobile-menu) .btn，它应该可以工作
这里是一个简化的例子jsfiddle.net/0gmc2aox
是的，对不起@elveti，我正在使用 sass
html 元素将被*:not(.navbar):not(.footer):not(.mobile-menu) 选中，因此您将选择所有 btn
这个答案很好地解释了一切：stackoverflow.com/a/10711731/7585166

标签： css sass css-selectors

【解决方案1】：

给定：

<body>
    <div class="navbar">
        <div class="btn">
        </div>
    </div>
</body>

*:not(.navbar):not(.footer):not(.mobile-menu) 匹配 <body>，然后 .btn 匹配 <div class="btn">。

*:not(.navbar):not(.footer):not(.mobile-menu) 与 <div class="navbar"> 不匹配并不重要，因为 <div class="btn"> 仍然是 <body> 的后代。

【讨论】：