CSS :not选择器未按预期生效，最后一个段落仍有下边距问题咨询

错误原因 #

你使用的:not(:last-child)伪类的匹配规则是选中所有不属于父容器最后一个子元素的.paragraph元素。
你当前.col-1-of-2容器的子元素顺序为：h3 → 第一个.paragraph → h3 → 第二个.paragraph → a.btn-text，两个.paragraph都不是父容器的最后一个子元素，因此该样式对两个段落都生效，导致最后一个段落也被加上了margin-bottom。

解决方案 #

方案1（最常用，兼容性好）

改用:last-of-type伪类，该伪类会匹配父容器内同标签类型（这里是p标签）的最后一个元素，修改SCSS代码如下：

.paragraph{
  font-size: 1.6rem;
  &:not(:last-of-type)
  {
    margin-bottom: 3rem;
  }
}

该方案适合父容器内所有.paragraph类元素都是p标签、无其他无关p标签的场景。

方案2（精准匹配类名，兼容性一般）

如果存在其他标签也使用.paragraph类的场景，可以使用CSS按类筛选的nth-last-child语法，直接匹配最后一个带.paragraph类的元素：

.paragraph{
  font-size: 1.6rem;
  &:not(:nth-last-child(1 of .paragraph))
  {
    margin-bottom: 3rem;
  }
}

该语法支持Chrome 111+、Firefox 113+、Safari 9+版本，对兼容性要求不高的项目可使用。

方案3（全版本兼容）

如果需要兼容低版本浏览器，可以改用相邻元素margin-top的方式实现需求，避免:not匹配逻辑的问题：

.paragraph {
  font-size: 1.6rem;
}
/* 给所有紧跟在.paragraph之后的元素加上上边距，效果等价 */
.paragraph + * {
  margin-top: 3rem;
}

内容的提问来源于stack exchange，提问作者Julie