在LESS嵌套规则中使用CSS：not selector

Question

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

在上面的LESS示例中，我希望将div类“outerclass”中的所有“p”元素作为目标，而不是在名为“.nested”的另一个嵌套div中的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)表示所有p元素没有.nested类本身，您所说的是.nested类位于{{1} } div所在的位置，所以你需要这个：

p

更新：我删除了.outerclass { h3 { color: blue; } :not(.nested) p, > p { color: green; } } 并添加了直接子div实例，因此CSS输出将正确定位p中除例外之外的所有p。

.outerclass元素的CSS输出

p

以上内容将定位.outerclass :not(.nested) p, .outerclass > p { color: green; } 中的所有直接子p元素和任何嵌套p元素，但.outerclass元素的子元素除外。

问题

BoltClock注意到的问题是.nested是否嵌套得比p元素的直接子项更深。 See this fiddle where the last p element is still targeted even though it is within a .nested class

如果.nested元素始终是p的直接子元素，则没有问题。或者，如果.nested始终是.nested的直接子项，但.outerclass可能嵌套得更深，则可以将上面的选择器更改为p以生成{{1}的CSS其中will then work for all p under .nested。

问题是，与> :not(.nested) p相关的.outerclass > :not(.nested) p和.nested内的.outerclass 是否与这些父母在某个任意深度。没有css选择器可以充分处理。