在 LESS 嵌套规则中使用 CSS :not 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19933445/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS :not selector in LESS nested rules
提问by user2317093
.outerclass {
h3 {
color: blue;
}
p:not(.nested) {
color: green;
}
}
In the LESS example above I wish to target all "p" elements within a div class "outerclass" but NOT the p elements within the further nested div called ".nested" - it does not work but instead makes all p elements green. I have tried...
在上面的 LESS 示例中，我希望定位 div 类“outerclass”中的所有“p”元素，但不定位名为“.nested”的进一步嵌套 div 中的 p 元素 - 它不起作用，而是使所有 p 元素变为绿色。我试过了...
p:not(.nested p) // excludes all p elements
and also...
并且...
p:not(.nested > p) // excludes all p elements
...to no avail. Is this possible or what am I missing? I am brand new to LESS
……无济于事。这是可能的还是我错过了什么？我是 LESS 的新手
回答by ScottS
It is not a LESS issue as much as your css selector syntax. The p:not(.nested)is saying all pelements without the .nestedclass themselves, what you state is that the .nestedclass is on a divin which the presides, so you need this:
它不像您的 css 选择器语法那样是一个 LESS 问题。该p:not(.nested)是说所有p没有的元素.nested类本身，你的状态是，.nested类是在div其中p居住，所以你需要这样的：
.outerclass {
h3 {
color: blue;
}
:not(.nested) p,
> p {
color: green;
}
}
UPDATE: I removed the divand added the direct child pinstance, so that the CSS output would properly target all pin .outerclassexcept for the exception.
更新：我删除了div，并且增加了直接子p实例，使CSS输出将正确定位所有p在.outerclass除例外。
CSS Output for pelements would be
p元素的CSS 输出将是
.outerclass :not(.nested) p,
.outerclass > p {
color: green;
}
The above will target any direct child pelements and any nested pelements in .outerclassexcept those that are children of your .nestedelement.
以上将针对任何直接子p元素和任何嵌套p元素，.outerclass除了元素的子.nested元素。
An issue
一个问题
The issue BoltClock is noting is if the pis nested deeper than being the immediate child of the .nestedelement. See this fiddle where the last pelement is still targeted even though it is within a .nestedclass.
BoltClock 注意到的问题是如果p嵌套得比.nested元素的直接子元素更深。请参阅此小提琴，其中最后一个p元素仍然是目标，即使它在.nested类中。
If the pelement will always be the direct child of .nestedthere is no issue. Or if the .nestedis always the direct child of .outerclassbut the pmaybe nested deeper, then the above selector can be changed to > :not(.nested) pto produce CSS of .outerclass > :not(.nested) pwhich will then work for all punder .nested.
如果p元素始终是 的直接子元素.nested，则没有问题。或者，如果.nested总是直接孩子.outerclass，但p也许嵌套更深，那么上面的选择可以改变> :not(.nested) p产生的CSS.outerclass > :not(.nested) p这也就那么所有的工作p下.nested。
The problem will be if the .nestedin relation to .outerclassand the pwithin .nestedare both at some arbitrary depth to those parents. No css selector could handle that adequately.
问题将.nested在于.outerclass，对于这些父母来说，相关和p内部.nested是否都处于任意深度。没有 css 选择器可以充分处理这个问题。
