本文详解如何针对具有相同类名但不同 id 的按钮（如 `#btnsavechanges` 和 `#btnlogout`），独立定制其 `::after` 伪元素的悬停背景色，同时确保动画效果正常触发。
在 CSS 中，当多个选择器作用于同一元素的同一属性时，层叠优先级（specificity）和声明顺序共同决定最终生效的样式。本例中，.button-57:after 定义了默认的黑色 background-color 和初始 transform 状态；而后续通过 .button-57#btnSaveChanges::after 等选择器尝试覆盖 background-color 是可行的（因其 specificity 更高），但悬停动画失效的根本原因在于：.button-57:hover:after 中的 transform 声明会覆盖 ID 选择器中同名的 transform，且未被显式重写。
由于 .button-57:hover:after 规则全局生效，它会强制将所有 .button-57 按钮的 ::after 元素 transform 设为 skewY(9.3deg) scaleY(2) —— 这一声明优先级高于仅含 ID 的 .button-57#btnSaveChanges::after（后者未包含 :hover 状态），导致自定义背景色虽已应用，但 transform 动画始终沿用全局黑色版本的逻辑，视觉上表现为“动画未触发”。
✅ 正确解法是：为每个 ID 分别定义带状态的悬停规则，并对关键动画属性（如 transform）添加 !important 以确保优先级压倒全局规则。
以下是完整、可直接使用的解决方案：
/* 基础按钮样式（保持不变） */
.button-57 {
position: relative;
overflow: hidden;
border: 1px solid #BBBBBB;
border-radius: 20px;
color: #18181a;
display: inline-block;
font-size: 15px;
line-height: 15px;
padding: 18px 18px 17px;
text-decoration: none;
cursor: pointer;
background: #fff;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 45%;
margin: 10px;
}
.button-57 span:first-child {
position: relative;
transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
z-index: 10;
}
.button-57 span:last-child {
color: white;
display: block;
position: absolute;
bottom: 0;
transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
z-index: 100;
opacity: 0;
top: 50%;
left: 50%;
transform: translateY(225%) translateX(-50%);
height: 14px;
line-height: 13px;
}
/* 默认 ::after 样式（仅设基础结构，不设具体颜色） */
.button-57::after {
content: "";
position: absolute;
bottom: -50%;
left: 0;
width: 100%;
height: 100%;
transform-origin: bottom center;
transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
transform: skewY(9.3deg) scaleY(0);
z-index: 50;
}
/* 为 btnSaveChanges 单独定义悬停态 ::after */
.button-57#btnSaveChanges::after {
background-color: #2140D9; /* 蓝色主色 */
}
.button-57#btnSaveChanges:hover::after,
.button-57#btnSaveChanges:active::after {
transform: skewY(9.3deg) scaleY(2) !important;
}
/* 为 btnLogout 单独定义悬停态 ::after */
.button-57#btnLogout::after {
background-color: #db2020; /* 红色主色 */
}
.button-57#btnLogout:hover::after,
.button-57#btnLogout:active::after {
transform: skewY(9.3deg) scaleY(2) !important;
}
/* 公共悬停动画（仅控制 span，不干涉 ::after 的 transform） */
.button-57:hover span:last-child,
.button-57:active span:last-child {
transform: translateX(-50%) translateY(-50%);
opacity: 1;
transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}? 关键注意事项：
- ✅ 避免重复定义 ::after 全局结构：将 content、position、transition 等通用样式保留在 .button-57::after 中，仅通过 ID 选择器覆盖 background-color 和状态下的 transform，提升可维护性；
- ✅ :hover::after 必须与 ID 绑定：.button-57#btnSaveChanges:hover::after 的 specificity 高于 .button-57:hover::after，确保样式精准生效；
- ⚠️ !important 仅用于 transform：因 transform 是动画核心属性，且受全局规则干扰，此处使用 !important 是合理且必要的；但应避免滥用，其他属性（如 background-color）无需加；
- ✅ HTML 中 class 名应为 class 而非 className：React JSX 中写 className 是正确的，但纯 HTML 或 CSS 上下文需用 class（示例代码已按标准 HTML 标签书写）。
该方案在保持原有交互动画逻辑的前提下，实现了按 ID 精准定制伪元素背景色的目标，语义清晰、扩展性强，适用于多按钮差异化设计场景。
