[英]Using CSS :not selector in LESS nested rules
.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. 在上面的LESS示例中,我希望将div类“outerclass”中的所有“p”元素作为目标,而不是在另一个嵌套div中称为“.nested”的p元素 - 它不起作用,而是使所有p元素变为绿色。 I have tried...
我努力了...
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的新手
It is not a LESS issue as much as your css selector syntax. 它与您的css选择器语法一样不是一个LESS问题。 The
p:not(.nested)
is saying all p
elements without the .nested
class themselves , what you state is that the .nested
class is on a div
in which the p
resides, so you need this: p:not(.nested)
说的是没有.nested
类本身的所有p
元素,你说的是.nested
类在p
所在的div
上,所以你需要这个:
.outerclass {
h3 {
color: blue;
}
:not(.nested) p,
> p {
color: green;
}
}
UPDATE: I removed the div
and added the direct child p
instance, so that the CSS output would properly target all p
in .outerclass
except for the exception. 更新:我删除了
div
并添加了直接子p
实例,因此CSS输出将正确地定位.outerclass
所有p
,除了异常。
CSS Output for p
elements would be p
元素的CSS输出将是
.outerclass :not(.nested) p,
.outerclass > p {
color: green;
}
The above will target any direct child p
elements and any nested p
elements in .outerclass
except those that are children of your .nested
element. 上面将针对
.outerclass
任何直接子p
元素和任何嵌套p
元素,除了那些是.nested
元素的.nested
元素。
An issue 一个问题
The issue BoltClock is noting is if the p
is nested deeper than being the immediate child of the .nested
element. BoltClock注意到的问题是
p
是否嵌套得比.nested
元素的直接子项.nested
。 See this fiddle where the last p
element is still targeted even though it is within a .nested
class . 看到这个小提琴,即使它位于
.nested
类中,最后一个p
元素仍然是目标 。
If the p
element will always be the direct child of .nested
there is no issue. 如果
p
元素永远是.nested
的直接子.nested
,则没有问题。 Or if the .nested
is always the direct child of .outerclass
but the p
maybe nested deeper, then the above selector can be changed to > :not(.nested) p
to produce CSS of .outerclass > :not(.nested) p
which will then work for all p
under .nested
. 或者如果
.nested
始终是.nested
的直接子.outerclass
但是p
可能嵌套得更深,那么上面的选择器可以更改为> :not(.nested) p
以生成.outerclass > :not(.nested) p
CSS .outerclass > :not(.nested) p
这将适用于.nested
下的所有p
。
The problem will be if the .nested
in relation to .outerclass
and the p
within .nested
are both at some arbitrary depth to those parents . 这个问题将是,如果
.nested
有关.outerclass
和p
内.nested
都在一些任意深度的家长 。 No css selector could handle that adequately. 没有css选择器可以充分处理。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.