能否用CSS all简写重置元素除指定属性（如display）外的所有属性？

开发者阿泽

2026-8-29

问题

在CSS开发中，是否可以使用all简写属性，重置元素的所有CSS属性值、仅保留某一个指定属性（例如display属性）的设置？

现有测试代码如下：

button#text-button-1 {
  all: unset;
}
.hidden {
  display: none;
}

<button id="text-button-1" class="hidden">Button</button>

期望实现类似下面写法的效果，但已知该写法不符合CSS语法，属于无效写法：

button#text-button-1 {
  all:not(display): unset;
}

请问该需求是否有可行的正确实现方式？

回答

首先明确：CSS规范目前没有提供all属性排除指定属性的语法，你写的all:not(display)确实是无效写法，可以通过以下几种方案实现需求：

重置后重新声明保留属性（兼容性最佳，生产环境首选）
这是目前最通用的解决方案，利用CSS属性的层叠覆盖规则，先通过all重置所有属性，再在后面重新声明你需要保留的属性即可。注意属性顺序不能颠倒，否则保留的属性会被all的重置效果覆盖。
针对你给出的保留display的场景，写法如下：
```
button#text-button-1 {
  all: unset;
  /* 重新声明要保留的display属性，可根据需求选择值：
     要继承父级/其他类的设置用inherit/revert，要固定值直接写对应属性值即可
  */
  display: revert;
}
.hidden {
  display: none;
}
```
这种写法兼容所有支持all属性的浏览器（Chrome 37+、Firefox 27+、Safari 9.1+、Edge 79+），没有额外兼容问题。
借助CSS预处理器批量生成重置规则
如果需要保留/排除的属性较多，手动逐个重写效率低，可以借助Sass/Less等预处理器，维护一份全量CSS属性列表，通过mixin自动生成「排除指定属性外所有属性重置」的代码，本质还是第一种方案的自动化实现，适合大型项目使用。
注意避坑
不要尝试在all声明之前给要保留的属性加!important，同选择器内all的重置效果会覆盖前面所有同属性声明，哪怕加了!important也无效，必须把要保留的属性写在all声明之后。