在LESS嵌套規則中使用CSS：not selector

Question

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

在上面的LESS示例中，我希望將div類“outerclass”中的所有“p”元素作為目標，而不是在另一個嵌套div中稱為“.nested”的p元素 - 它不起作用，而是使所有p元素變為綠色。 我努力了...

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

並且...

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

......無濟於事 這是可能的還是我錯過了什么？ 我是LESS的新手

Answer 1

它與您的css選擇器語法一樣不是一個LESS問題。 p:not(.nested)說的是沒有.nested類本身的所有p元素，你說的是.nested類在p所在的div上，所以你需要這個：

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

更新：我刪除了div並添加了直接子p實例，因此CSS輸出將正確地定位.outerclass所有p ，除了異常。

p元素的CSS輸出將是

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

上面將針對.outerclass任何直接子p元素和任何嵌套p元素，除了那些是.nested元素的.nested元素。

一個問題

BoltClock注意到的問題是p是否嵌套得比.nested元素的直接子項.nested 。 看到這個小提琴，即使它位於.nested類中，最后一個p元素仍然是目標 。

如果p元素永遠是.nested的直接子.nested ，則沒有問題。 或者如果.nested始終是.nested的直接子.outerclass但是p可能嵌套得更深，那么上面的選擇器可以更改為> :not(.nested) p以生成.outerclass > :not(.nested) p CSS .outerclass > :not(.nested) p這將適用於.nested下的所有p 。

這個問題將是，如果.nested有關.outerclass和p內.nested 都在一些任意深度的家長 。 沒有css選擇器可以充分處理。