css - 用于选择除伪元素之外的所有元素的 LESS 嵌套规则

Question

我正在编写一个 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 的每个子元素，最后一个除外？

Answer 1

首先，需要澄清一些术语:选择器从不匹配伪元素。在您的情况下，:last-child 是一个伪类，而不是伪元素。

A pseudo-class就像类选择器、ID 选择器或类型选择器一样，它们都匹配元素，并且它们直接作用于您将它们附加到的任何元素。这些都被称为 simple selectors .事实上，:not() 本身也是一个伪类——它恰好接受一个简单的选择器作为参数，例如另一个伪类。

A pseudo-element另一方面是一个完全独立于元素的概念。伪元素的特殊之处在于它不是简单的选择器，因此除非您指定该伪元素，否则选择器永远不会实际匹配伪元素或将样式应用于伪元素。

现在，选择器 .content:not(:last-child) 的意思是

Select any element
that has a class content
and is not the last child of its parent.

但这不是您想要做的。您正在尝试选择 .content 的最后一个 以外的所有内容，因此您需要使用组合器将它们分开。最适合使用的当然是子组合器:

.content {
    > :not(:last-child) {
        margin-bottom: 30px;
    }
}

这将编译为:

.content > :not(:last-child) {
    margin-bottom: 30px;
}