本文详解如何针对具有相同类名但不同 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 精准定制伪元素背景色的目标，语义清晰、扩展性强，适用于多按钮差异化设计场景。