我正在编写一个 LESS 嵌套规则,目前看起来像这样:
.content {
margin-bottom: 30px;
&:last-child {
margin-bottom: 0;
}
}
但我想用一个非选择器来做,而不必定义两次边距。我不想在最后一个子选择器中重新设置。
我想做的是这样的:
.content {
&:not(:last-child) {
margin-bottom: 30px;
}
}
生成的 CSS:
.content:not(:last-child) {
margin-bottom: 30px;
}
但我的语法似乎有误,因为它不起作用,没有元素获得 30 像素的底部边距。
我以前没有使用过 not-selector,所以我对语法有点不确定。是否可以做,如果可以,怎么做?
我如何使用 LESS 语法编写规则来选择特定 div 的每个子元素,最后一个除外?
最佳答案
首先,需要澄清一些术语:选择器从不匹配伪元素。在您的情况下,:last-child
是一个伪类,而不是伪元素。
A pseudo-class就像类选择器、ID 选择器或类型选择器一样,它们都匹配元素,并且它们直接作用于您将它们附加到的任何元素。这些都被称为 simple selectors .事实上,:not()
本身也是一个伪类——它恰好接受一个简单的选择器作为参数,例如另一个伪类。
A pseudo-element另一方面是一个完全独立于元素的概念。伪元素的特殊之处在于它不是简单的选择器,因此除非您指定该伪元素,否则选择器永远不会实际匹配伪元素或将样式应用于伪元素。
现在,选择器 .content:not(:last-child)
的意思是
Select any element
that has a classcontent
and is not the last child of its parent.
但这不是您想要做的。您正在尝试选择 .content
的最后一个 以外的所有内容,因此您需要使用组合器将它们分开。最适合使用的当然是子组合器:
.content {
> :not(:last-child) {
margin-bottom: 30px;
}
}
这将编译为:
.content > :not(:last-child) {
margin-bottom: 30px;
}
关于css - 用于选择除伪元素之外的所有元素的 LESS 嵌套规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20631212/