【问题标题】：LESS nested rule for selecting all except a pseudo elementLESS 嵌套规则，用于选择除伪元素之外的所有元素
【发布时间】：2014-01-05 00:59:49
【问题描述】：

我正在编写一个 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 像素。

我之前没有使用过非选择器，所以我对语法有点不确定。有可能吗，如果可以，怎么做？

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

【问题讨论】：

这不是LESS规则，我想写LESS语法和嵌套，但我反正没用
也许这会起作用：&:not(&:last-child)，但不确定。
@MikaldL 不，也没用

标签： css css-selectors less

【解决方案1】：

澄清：

MDN 说：

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

:last-child 是一个伪类，而不是一个伪元素，所以它肯定可以工作。此外，MDN 并没有错（正如我之前建议的那样）。

见W3C specification:

否定伪类 :not(X) 是一个以简单选择器（不包括否定伪类本身）作为参数的函数式表示法。

什么是simple selector？

简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类。

LESS怎么写？

更少的方法是：

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

所有学分都转到user2915402，所以如果他编辑他的问题以使用 LESS 并链接到源，我将删除我的。

【讨论】：

如果:last-child 不是伪类，它会起作用......在你的情况下这是不可能的。请参阅我的更新答案。
这很奇怪，您似乎是对的，但下面的@Nathan 提供了一个实际使用伪元素的示例。那怎么可能呢？
@seven-phases-max 实际上，确实如此。我刚刚在 Chrome 中尝试过，它可以工作。但是，它在 IE 中不起作用（惊喜）
是的，刚刚注意到。现在我相信我终于有了完全正确的答案版本。吸取了很多教训！
@stinaq：如果它在 IE 中不起作用，那么您正在测试一个非常旧的版本。如果您需要支持真正旧版本的 IE，您将不得不忘记使用 :not() 和 :last-child 以及大多数其他新的 CSS3 伪类。

【解决方案2】：

试试下面的。

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

结果输出将是..

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

希望这会有所帮助。

【讨论】：

我不确定我是否理解，这似乎与我上面编写的代码完全相同，还是我遗漏了什么？
相同的代码，类从.bdo更改为.content - @stinaq
您可以粘贴它Here 并进行验证。 - @stinaq
啊，bdo 部分只是我的一个错字，我在编辑的问题中修复了它！
是的，但是在我上面提供的编译器下，显示第2行和第5行有错误。-@stinaq

【解决方案3】：

这就是使用 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/

【讨论】：

代码示例具有误导性，但您的小提琴确实有效。
这有效，但针对的是您正在设计的孩子。 OP 想要定位父元素（.content，而不是 .content__item）

【解决方案4】：

首先，需要澄清一些术语：选择器永远不会匹配伪元素。在您的情况下，: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;
}

【讨论】：