在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元素的直接子元素更深.看到这个小提琴,p即使它在一个.nested类中,最后一个元素仍然是目标.

如果p元素永远是直接的孩子,.nested那就没有问题.或者,如果.nested总是直接孩子.outerclass,但p也许嵌套更深,那么上面的选择可以改变> :not(.nested) p生产CSS的.outerclass > :not(.nested) p哪些然后将所有的工作p下.nested.

这个问题将是,如果.nested在关系.outerclass和p内.nested是既在一些任意深度的家长.没有css选择器可以充分处理.