本文详解 Angular Material 表格中行选中（selection）与鼠标悬停（hover）样式冲突的根本原因，并提供高优先级 CSS 覆盖、伪类组合及最佳实践，确保 hover 效果不覆盖选中态，兼容最新 @angular/material@17+（MDC 版本）。
本文详解 angular material 表格中行选中（selection）与鼠标悬停（hover）样式冲突的根本原因，并提供高优先级 css 覆盖、伪类组合及最佳实践，确保 hover 效果不覆盖选中态，兼容最新 `@angular/material@17+`（mdc 版本）。
在使用 Angular Material 的 <table mat-table> 实现可选中表格时，开发者常遇到一个典型问题：当用户点击某行完成选中后，再将鼠标移至该行，选中背景色突然消失——看似“选中失效”，实则为 CSS 层叠优先级冲突所致。
Angular Material（MDC 版本，即 @angular/material@16+）默认为 .mat-mdc-row 等元素设置了 background: inherit，且其 CSS 规则具有较高特异性。若你自定义了 .hovered 类（如 tr.hovered { background: #e3f2fd; }），该规则极易被 Material 内置样式覆盖，尤其在 :hover 状态下，Material 会动态注入更高权重的背景声明，导致自定义悬停色或选中色被重置。
✅ 正确解法不是禁用 Material 样式，而是提升自定义选择器的优先级，并精准控制状态组合逻辑。推荐以下 CSS 写法（置于 app.component.css 或组件样式中）：
/* 确保表格容器布局稳定 */
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
}
.mat-table {
overflow: auto;
max-height: 500px;
}
/* 关键：使用更具体的选择器，覆盖 Material 默认 hover 行为 */
.mat-mdc-table .mat-mdc-row:hover:not(.selected),
.mat-mdc-table .mat-mdc-footer-row:hover:not(.selected) {
background-color: #f5f5f5 !important; /* 悬停未选中行 */
}
/* 选中态（含悬停时仍保持）——最高优先级 */
.mat-mdc-table .mat-mdc-row.selected,
.mat-mdc-table .mat-mdc-row.selected:hover,
.mat-mdc-table .mat-mdc-footer-row.selected,
.mat-mdc-table .mat-mdc-footer-row.selected:hover {
background-color: #2196f3 !important; /* 主色调选中背景 */
color: white;
}
/* 可选：修复单元格溢出导致的视觉截断 */
mat-cell.mat-cell,
mat-header-cell.mat-header-cell {
overflow: visible;
}⚠️ 注意事项：
- 避免滥用 !important：仅在覆盖第三方库样式且无法通过增加选择器特异性解决时使用；长期项目建议通过 ViewEncapsulation.None + scoped 类名管理；
- 状态组合必须显式声明：:hover 和 .selected 同时存在时，浏览器按规则顺序匹配，因此 .selected:hover 必须单独定义，否则 :hover 规则会覆盖 .selected；
- 检查 Angular Material 版本：MDC 版本（mat-mdc-*）类名与旧版（mat-*）不同，StackBlitz 示例中需确认 angular.json 中是否启用 "enableIvy": true 及正确导入 MatTableModule；
- TS 逻辑配合：在组件 TS 中，应通过 SelectionModel 管理选中状态，并为每行绑定 [class.selected]="selection.isSelected(row)"，而非依赖纯 CSS 类切换。
总结：Material 表格的 hover/selection 冲突本质是 CSS 层叠战争。通过提高选择器特异性（如 .mat-mdc-table .mat-mdc-row.selected:hover）、明确状态组合、合理使用 !important（临时方案），即可实现「悬停高亮未选中行，选中行始终醒目且 hover 不干扰」的专业交互体验。
