问用于选择除伪元素以外的所有元素的较少嵌套规则

EN

首先，一些术语需要澄清:选择器永远不匹配伪元素.在您的例子中，:last-child是一个伪类，而不是伪元素。

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

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

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

选择任何元素 它有一个类content 也不是它父母的最后一个孩子。

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

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

这将汇编成：

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

澄清：

MDN说：

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

:last-child是一个伪类，而不是一个，所以它肯定能工作。而且，MDN并不是错误的(正如我之前建议的那样)。

请参阅W3C规范

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

什么是简单选择器？

简单的选择器要么是类型选择器、通用选择器、属性选择器、类选择器、ID选择器，要么是pseudo-class.。

怎么写得少一点？

这样做的较少方式是：

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

所有的学分都会转到user2915402，所以如果他编辑他的问题来使用更少的内容并链接到源代码，我会删除我的问题。

试试下面的。

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

得到的输出将是..。

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

希望这能有所帮助。