Использование CSS: не селектор в LESS-вложенных правилах

.outerclass {
    h3 {
        color: blue;
    }
    p:not(.nested) {
        color: green;
    }
}

В приведенном выше примере LESS я хочу настроить таргетинг на все "p" элементы в классе div "outerclass", но не на элементы p в дополнительном вложенном div, называемом ".nested" - он не работает, а вместо этого делает все p элементов зеленый. Я пробовал...

p:not(.nested p) // excludes all p elements

а также...

p:not(.nested > p) // excludes all p elements

... безрезультатно. Возможно ли это, или что мне не хватает? Я совершенно новый для МЕНЬШЕ

Ответ 1

Это не проблема LESS, а синтаксис синтаксиса css. p:not(.nested) говорит все p элементы без класса .nested, что вы утверждаете, что класс .nested находится на div, в котором находится p, поэтому вам нужно это:

.outerclass {
    h3 {
        color: blue;
    }
    :not(.nested) p,
    > p {
        color: green;
    }
}

UPDATE: я удалил div и добавил экземпляр direct child p, так что вывод CSS правильно настроил бы все p в .outerclass, за исключением исключения.

Результат CSS для элементов p будет

.outerclass :not(.nested) p,
.outerclass > p {
  color: green;
}

Вышеуказанные будут нацелены на любые прямые дочерние элементы p и любые вложенные элементы p в .outerclass, кроме тех, которые являются дочерними элементами вашего элемента .nested.

Проблема

Проблема BoltClock отмечает, что если p вложен глубже, чем непосредственный дочерний элемент .nested. Посмотрите эту скрипту, где последний элемент p по-прежнему нацелен, даже если он находится в классе .nested.

Если элемент p всегда будет прямым дочерним элементом .nested, проблем нет. Или, если .nested всегда является прямым дочерним элементом .outerclass, но p может быть вложен глубже, то указанный выше селектор можно изменить на > :not(.nested) p, чтобы создать CSS .outerclass > :not(.nested) p, который будет работать для всех p под .nested.

Проблема будет, если .nested по отношению к .outerclass и p внутри .nested находятся на некоторой произвольной глубине для этих родителей. Никакой css-селектор не сможет справиться с этим.