css - 使用 CSS :not selector in LESS nested rules

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类(class)在 div 上其中p驻留，所以你需要这个:

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

更新:我删除了 div并添加了直接 child p例如，这样 CSS 输出将正确地定位所有 p在 .outerclass除了异常(exception)。

p 的 CSS 输出元素将是

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

以上将针对任何直系 child p元素和任何嵌套 p .outerclass 中的元素除了那些是你的 child 的.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 的 CSS哪个will then work for all p under .nested .

问题是如果 .nested关于 .outerclass和 p在 .nested 内对那些 parent 来说，都处于某种任意深度。没有 css 选择器可以充分处理这个问题。