如何阻止按钮:focus伪类的属性应用到:active伪类？

这个问题其实是浏览器处理按钮状态的逻辑导致的：当你点击按钮时，它会同时处于:focus和:active两种状态。你的button:focus规则里定义了text-decoration: underline，而button:active只覆盖了background-color，所以其他没被覆盖的:focus属性就会保留下来。

下面给你两种实用的解决方法：

方法一：用:not()限定focus样式的生效条件 #

直接让:focus的样式只在按钮没有处于:active状态时生效，这样点击按钮（active状态）时，focus的样式就不会被应用了：

button {
  font-weight: normal;
  color: black;
}

/* 仅当按钮处于focus但未被激活（active）时，应用这些样式 */
button:focus:not(:active) {
  background-color: red;
  text-decoration: underline;
}

button:active {
  background-color: #b0bfc6;
}

方法二：用更具体的选择器覆盖冲突样式 #

如果你需要保留focus样式的其他场景，只是想在active状态下重置不需要的属性，可以用button:focus:active这个复合选择器——它的权重比单独的:focus或:active更高，专门处理同时处于两种状态的情况：

button {
  font-weight: normal;
  color: black;
}

button:focus {
  background-color: red;
  text-decoration: underline;
}

button:active {
  background-color: #b0bfc6;
}

/* 当按钮同时处于focus和active时，重置不需要的属性 */
button:focus:active {
  text-decoration: none;
  /* 可选：显式指定背景色，确保优先级 */
  background-color: #b0bfc6;
}

两种方法都能解决你的问题，方法一更直接，适合完全不想让focus样式干扰active状态的场景；方法二更灵活，适合需要在其他场景保留完整focus样式的情况。

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