如何使用CSS通用选择器时排除指定类及其子元素

你可以通过两种方式实现需求，具体如下：

方法一：改写全局重置选择器，从根源排除目标元素 #

直接修改全局重置的CSS选择器，让它不匹配.exclude元素及其所有子元素：

*:not(.exclude):not(.exclude *) {
  margin: 0;
  padding: 0;
}

这种方式不需要额外的覆盖规则，性能更优，且能精准避免重置目标元素的默认样式。注意该写法依赖:not()伪类的支持，现代主流浏览器均兼容。

方法二：保留全局*选择器，针对性恢复默认样式 #

如果你不想修改已有的全局重置规则，可以单独为.exclude及其子元素恢复margin和padding的浏览器默认值——不用all: revert（它会重置所有CSS属性），只针对需要的属性使用revert：

* {
  margin: 0;
  padding: 0;
}

/* 只恢复margin和padding到浏览器默认 */
.exclude,
.exclude * {
  margin: revert;
  padding: revert;
}

revert关键字会将属性值恢复为浏览器的用户代理样式（即默认样式），完全符合你的需求。

兼容旧浏览器的备选方案 #

如果需要兼容不支持revert的旧浏览器（如Safari 14.0及以下），只能手动为常见元素设置默认的margin和padding值，比如：

.exclude p { margin: 1em 0; }
.exclude ul, .exclude ol { margin: 1em 0; padding-left: 40px; }
.exclude h1 { margin: 0.67em 0; }
/* 根据需求补充其他元素的默认样式 */

这种方式比较繁琐，但能覆盖旧浏览器场景。

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