Css: не псевдо-класс не вступает в силу

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, но что-то не так, поскольку нетli элементы получают фон.

Обновление : После ответа Йоханнеса я узнал, что верхний ul должен быть заключен в некоторый элемент, потому что :not(.not-ql-editor) представляет элементдаже если он не соответствует селектору. Но затем я заметил, что элемент "not-ql-editor "должен находиться непосредственно под элементом "ql-editor". Моя цель состояла в том, чтобы нацелить класс на любой уровень ниже" ql-editor ".

Обычно, когда вы, кромепространство между двумя селекторами, второй селектор должен предназначаться для элементов на любом уровне ниже первого. Разве это не так с: not селектор?

update2 :

Вот модифицированная версия скрипки: 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)

Answer 1

Проблема в вашем коде состоит в том, что первый список находится на другом «уровне потомка», чем второй список: ваш селектор CSS действителен только для li элементов внутри ul, который дочерний элемента, который не имеет .not-ql-editor, который также является потомком элемента, который имеет класс .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. Таким образом, вам нужно использовать это отношение для определения правила CSS, которое применяется, только если ul является прямым дочерним элементом DIV, который не имеет.not-ql-editor class.

в простом 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, который у вас был. Поскольку верхний элемент ul и элемент div.not-ql-editor являются одноуровневыми элементами, вы можете просто прикрепить правило not к элементу с подстановочными знаками и вместо цели ul > li просто указать цель li

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

<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>

Answer 3

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

  ul > li {
      background:blue;
  }

}

Исправьте это, чтобы убрать пробел между ql-editor и: не

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

      background:blue;

}