如何让匹配:last-child的h1继承普通h1的margin-bottom而无需重复声明

方案1：调整全局选择器排除特殊元素（最推荐） #

给需要保留默认边距的h1添加自定义类，同时修改原有:last-child选择器的匹配逻辑，排除带该类的元素，无需重复声明边距值：

/* 调整后的全局规则 */
h1 {
  margin-bottom: 2em;
}

/* 增加:not排除规则，带keep-default-mb类的h1就算是最后一个子元素也不会触发margin清零 */
h1:not(.keep-default-mb):last-child {
  margin-bottom: 0;
}

使用时只需要给目标h1加上类即可：

<h1 class="keep-default-mb">我是最后一个子元素，但我保留默认边距</h1>

这种方式维护性最高，后续修改全局h1边距时不需要同步调整覆盖规则。

方案2：用CSS变量统一管理边距值 #

如果不方便修改原有全局选择器规则，可以用CSS变量避免硬编码重复数值：

/* 统一定义h1底边距变量 */
:root {
  --h1-mb: 2em;
}

h1 {
  margin-bottom: var(--h1-mb);
}

h1:last-child {
  margin-bottom: 0;
}

/* 特殊h1的覆盖规则 */
h1.special-h1:last-child {
  margin-bottom: var(--h1-mb);
}

方案3：使用revert关键字 #

如果是现代浏览器场景，不需要定义变量也不需要改全局规则，可以直接用revert回退到上一级的样式规则：

h1.special-h1:last-child {
  margin-bottom: revert;
}

注意：revert关键字不兼容IE浏览器，Chrome/Edge/Firefox/Safari等主流现代浏览器均支持。

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