在 LESS 嵌套规则中使用 CSS :not 选择器

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) 是说所有没有.nested 类它们自己 的p 元素，你说的是.nested 类在div 上，p 驻留在其中，所以你需要这个：

.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 元素的子元素。

一个问题

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 和.nested 中的p 相关对于这些父母来说都是任意深度。没有 css 选择器可以充分处理这个问题。