如何实现按钮无额外样式用默认CSS，有样式则完全覆盖默认？

可以利用CSS的:not()伪类实现你要的逻辑——只给没有任何自定义类的按钮应用默认样式，带类的按钮则完全由自定义类控制，无需重复写all: unset。

具体实现代码 #

CSS部分 #

/* 仅给无class属性的按钮应用默认样式 */
button:not([class]) {
  all: unset;
  padding: 1rem 2rem;
  background-color: grey;
  color: white;
}

/* 自定义类直接编写样式即可，无需重复写all: unset */
.green {
  all: unset; /* 按需保留，用于清除浏览器原生button样式 */
  padding: 1rem 2rem; /* 若需继承默认属性可直接复用，无需重写 */
  background-color: green;
  color: white;
}

/* 其他自定义按钮类同理 */
.blue {
  all: unset;
  padding: 0.8rem 1.6rem;
  background-color: blue;
  color: white;
  border-radius: 4px;
}

HTML部分 #

<!-- 自动应用默认样式 -->
<button>Submit</button>
<!-- 应用.green自定义样式 -->
<button class="green">Submit</button>
<!-- 应用.blue自定义样式 -->
<button class="blue">Submit</button>

逻辑说明 #

• button:not([class])精准匹配没有class属性的按钮，仅对这类按钮加载默认样式。
• 带有自定义类的按钮不会触发默认样式规则，你可以在自定义类中完全重新定义样式，包括按需使用all: unset清除浏览器原生按钮样式。
• 如果自定义类需要继承部分默认属性（比如padding），也可以省略all: unset，直接覆盖需要修改的属性，灵活度更高。

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