在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)说所有p元素没有.nested类本身，你说的是.nested类在div所在的p，所以你需要这个：

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

更新：我删除了div并添加了直接子p实例，因此CSS输出将正确定位p中的所有.outerclass，除了异常。

p元素的CSS输出将是

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

以上将针对p中的任何直接子p元素和任何嵌套的.outerclass元素，除了那些是你的.nested元素的子元素。

一个问题

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

如果p元素永远是.nested的直接孩子，那就没有问题。或者如果.nested始终是.outerclass的直接孩子，但p可能更深地嵌套，那么上面的选择器可以改为> :not(.nested) p以产生.outerclass > :not(.nested) p的will then work for all p under .nested的CSS。

问题是，如果与.nested相关的.outerclass和p中的.nested对这些父母来说都处于任意深度。没有css选择器可以充分处理。