澄清：

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

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

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

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

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

选择任何元素
  有一个班级content
  并不是其父母的最后一个孩子。

但那并不是你想要做的。您尝试选择除 .content的最后一个之外的所有子项，因此您需要使用组合器将它们分开。当然，最适合使用的是儿童组合器：

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

这将编译为：

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

Answer 2

澄清：

MDN说：

:not(X)：X不得包含另一个否定选择器或任何伪元素。

:last-child是伪类，而不是伪元素，所以它绝对可以使用。此外，MDN没有错（正如我之前建议的那样）。

请参阅W3C specification：

否定伪类，不是（X），是一个函数符号，它将一个简单的选择器（不包括否定伪类本身）作为一个参数。

什么是simple selector？

一个简单的选择器是类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

如何用LESS编写？

它的方式很少：

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

所有积分都转到user2915402，所以如果他编辑他的问题与LESS合作并链接到来源，我会删除我的。

Answer 3

尝试以下内容。

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

结果输出为..

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

希望这有帮助。

Answer 4

这是使用LESS完成的方法：

.content__item {
  &:not(:last-child) {
    margin-bottom: 1.5rem;
  }
}

的

<div class="content">
    <div class="content__item">This has margin bottom</div>
    <div class="content__item">This has margin bottom too</div>
    <div class="content__item">This not</div>
</div>

工作示例：http://jsfiddle.net/VcEFu/1/

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

4 个答案:

澄清：

如何用LESS编写？