15 
.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 的新手

4

1 回答 1

34

与您的 css 选择器语法一样，这不是一个 LESS 问题。这p:not(.nested)就是说所有没有类本身p的元素，你说的是类是在其中驻留的，所以你需要这个：.nested.nesteddivp

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

更新：我删除div并添加了直接子p实例，以便 CSS 输出可以正确地针对p除.outerclass异常之外的所有内容。

元素的 CSS 输出p将是

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

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

一个问题

BoltClock 注意到的问题是，如果p嵌套比元素的直接子.nested元素更深。请参阅this fiddle，其中最后一个p元素仍然是目标，即使它在一个.nested类中。

如果p元素始终是直接子元素，.nested则没有问题。或者，如果.nested始终是 的直接子级，.outerclass但p可能嵌套更深，则可以更改上面的选择器> :not(.nested) p以生成 CSS ，然后.outerclass > :not(.nested) p该CSS将适用p于.nested.

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

于 2013-11-12T15:49:57.050 回答