css - CSS:非伪类未生效

我想使用:not伪类作为例外，其中css应该应用于除具有特定类的任何元素（包括其所有子元素）之外的所有内容。

但是在我的示例中，:not选择器会影响所有内容，但仅会影响:not选择器中的类。我正在使用Chrome浏览器。

fiddle

SCSS：

.ql-editor :not(.not-ql-editor){

  ul > li {
      background:blue;
  }

}

HTML：

<div class="ql-editor">

   <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
  </ul>

  <div class="not-ql-editor">
      <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
      </ul>
  </div>
</div>

我本来希望顶部的<ul><li>具有蓝色背景，而下部的<ul><li>不会具有背景，因为它具有.not-ql-editor类，但是由于没有li元素获得背景，所以似乎有些错误。

更新：
在Johannes回答之后，我了解到上部的ul需要包装在某个元素内，因为:not(.not-ql-editor)代表一个元素，即使它与选择器不匹配也是如此。
但是后来我注意到"not-ql-editor”元素必须直接在"ql-editor"元素的下面，我的目标是针对“ ql-editor”之下任何级别的类。

通常，当您在两个选择器之间只有一个空格时，第二个选择器应将目标定位在第一个选择器下方的任何位置。：not选择器不是这种情况吗？

更新2：

这是小提琴的修改版本：
fiddle2

如果html看起来像这样（具有相同的CSS）：

<div class="ql-editor">
  <div>
    <div class="not-ql-editor">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
        </ul>
    </div>
  </div>
</div>

小李变蓝了。尽管有CSS：.ql-editor :not(.not-ql-editor)

最佳答案

您的代码中的问题在于，第一个列表与第二个列表处于不同的“后裔级别”：CSS选择器仅对li内的ul元素有效，而.not-ql-editor是没有元素的子元素。 .ql-editor还是具有div类的元素的子级。

为此，您需要在第一个ul周围使用另一个ul（或其他）包装：

.ql-editor :not(.not-ql-editor) ul>li {
  background: blue;
}

<div class="ql-editor">
  <div>
    <ul>
      <li>hello></li>
      <li>hello</li>
      <li>hello</li>
    </ul>
  </div>
  <div class="not-ql-editor">
    <ul>
      <li>hello</li>
      <li>hello</li>
      <li>hello</li>
    </ul>
  </div>
</div>

评论和问题编辑后的补充：

在您发布的第一个代码示例中，您的.ql-editor元素与ul DIV元素处于不同的后代级别：第一个.not-ql-editor是直系子代，第二个是直孙，而.ql-editor DIV作为包装器在ul和.ql-editor之间。我的回答是针对这种情况的，它确实有效。

在您发布的第二个代码示例中，您添加了另一个级别：DIV，在.not-ql-editor DIV和.not-ql-editor DIV之间没有任何类。这改变了一切。在您添加的小提琴中，ul DIV是ul的直接父级。因此，您需要使用该关系定义仅在.not-ql-editor是不具有类的DIV的直接子级时适用的CSS规则。

在纯CSS中，规则如下：

.ql-editor *:not(.not-ql-editor) > ul > li {
      background: blue;
}

这是您的第二个代码示例，在代码段中结合了该CSS规则，背景*没有*变成蓝色：

.ql-editor *:not(.not-ql-editor) > ul > li {
  background: blue;
}

<div class="ql-editor">
  <div>
    <div class="not-ql-editor">
      <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
      </ul>
    </div>
  </div>
</div>

这是您将此CSS用作SCSS的第二个小提琴：https://jsfiddle.net/e7d0h4yc/

关于css - CSS:非伪类未生效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58218322/

QL

css - CSS:非伪类未生效