Question

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

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

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类，但是由于没有{ {1}}元素具有背景。

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

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

更新2 ：

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

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

ql-editor

李变得忧郁。尽管有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>

Answer 1

您的代码中的问题是，第一个列表与第二个列表位于不同的“后裔级别”：CSS选择器仅对li中的ul元素有效，该元素为.not-ql-editor的元素的> child ，它又是具有.ql-editor类的元素的子元素。

要执行此操作，您需要在第一个div周围加上另一个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>

评论和问题编辑后的添加：

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

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

在普通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/

Answer 2

您可以使用原始HTML来执行此操作。由于顶部{"pass.json":"1292e22d5bea9edc79f37115fa680f7c4452a4ec","logo.png":"50a2b2fa88be143902527556d0cde943ce887028","logo@2x.png":"50a2b2fa88be143902527556d0cde943ce887028","icon.png":"50a2b2fa88be143902527556d0cde943ce887028","icon@2x.png":"50a2b2fa88be143902527556d0cde943ce887028"}元素和friend元素是同级元素，因此您可以将friend规则附加到通配符元素，而不是仅将{{1 }}

ul

div.not-ql-editor

Answer 3

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

  ul > li {
      background:blue;
  }

}

更正此内容以删除ql-editor和：not

之间的空格

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

      background:blue;

}

CSS：非伪类未生效

3 个答案: