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

Question

我正在编写一个LESS嵌套规则,目前看起来像这样:

.content {
     margin-bottom: 30px;
     &:last-child {
        margin-bottom: 0;
     }
}

但我想用非选择器来做,而不必两次定义边距.我不想在last-child-selector中重置.

我想做的是这样的:

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

结果CSS:

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

但我的语法似乎不对,因为它不起作用,没有元素获得30px的底部边距.

我之前没有使用过not-selector,所以我对语法有点不确定.有可能做,如果是,怎么做？

如何用LESS语法编写一个规则来选择特定div的每个子元素,除了最后一个？

Answer 1

Bol*_*ock 6

首先,澄清一些术语:选择器永远不会匹配伪元素.在您的情况下,:last-child是一个伪类,而不是伪元素.

甲伪类的作用就像一个类选择或ID选择器或一个类型选择器,在它们全部的匹配元件,并且它们直接作用于任何一个元件您附加它们.这些都被称为简单选择器.实际上,:not()它本身也是一个伪类 - 它恰好接受一个简单的选择器作为参数,比如另一个伪类.

甲伪元素,另一方面是从完全的元件的单独的概念.伪元素的特殊之处在于它不是一个简单的选择器,因此除非指定伪元素,否则选择器永远不会实际匹配样式或将样式应用于伪元素.

现在,选择器.content:not(:last-child)意味着什么

选择
具有类content
且不是其父级的最后一个子级的任何元素.

但这不是你想要做的.你试图选择除最后一个孩子以外的所有孩子.content,所以你需要用组合器将它们分开.当然,最适合使用的是儿童组合器:

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

这将编译为:

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