在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选择器可以充分处理。