本文详解 angular material 表格中行选中（selection）与鼠标悬停（hover）样式相互覆盖的根本原因，并提供高优先级 css 选择器、正确类名作用域及关键样式修复方案，确保 hover 效果不干扰选中状态。
本文详解 angular material 表格中行选中（selection）与鼠标悬停（hover）样式相互覆盖的根本原因，并提供高优先级 css 选择器、正确类名作用域及关键样式修复方案，确保 hover 效果不干扰选中状态。
在使用 Angular Material 的 <table mat-table> 实现可交互表格时，开发者常遇到一个典型问题：当用户点击某行触发选中（例如通过 selection.toggle(row)），再将鼠标移至该已选中行上时，选中背景色突然消失，被悬停样式覆盖——看似“选中失效”，实则是 CSS 层叠优先级冲突所致。
根本原因在于 Angular Material（v17+ 基于 MDC）默认为 .mat-mdc-row 等元素设置了 background: inherit，且其 CSS 规则具有较高特异性。当你自定义 .hovered 类（如 background: red）并仅通过 [class.hovered]="isHovered" 绑定时，该类的样式极易被 Material 内置规则覆盖，尤其在 hover 状态下，Material 的 :hover 伪类与你手动添加的 .hovered 类竞争背景色，导致选中态（如 .selected）被意外重置。
✅ 正确解法不是禁用 Material 样式，而是提升自定义样式的 CSS 优先级。推荐在组件样式文件（如 app.component.css）中使用更具体的选择器，并明确区分 hover 与选中状态：
/* 确保容器布局合理 */
.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,
.mat-mdc-table .mat-mdc-footer-row:hover {
background-color: #e8f5e9 !important; /* 悬停背景（浅绿） */
}
/* 为选中行单独定义高优先级样式（避免被 hover 覆盖） */
.mat-mdc-table .mat-mdc-row.selected,
.mat-mdc-table .mat-mdc-row.mat-mdc-selected {
background-color: #4caf50 !important; /* 选中背景（绿色） */
font-weight: 500;
}
/* 可选：修复单元格溢出，防止样式截断 */
mat-cell.mat-cell,
mat-header-cell.mat-header-cell {
overflow: visible;
}⚠️ 注意事项：
- 避免滥用 !important，但在此场景下是必要手段，因需明确胜过 Material 的预设规则；
- 不要将 .hovered 类直接写在 <tr> 上并依赖 [class.hovered] 动态绑定——Material 的 :hover 会实时生效，与你的类逻辑不同步；应直接利用原生 :hover 伪类；
- 若使用 SelectionModel<T> 管理选中状态，请确保模板中正确绑定：
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [class.selected]="selection.isSelected(row)" (click)="selection.toggle(row)"> </tr> - Angular v17+ 使用 .mat-mdc-* 类名前缀，旧版（v15 及之前）为 .mat-*，请根据实际版本调整选择器。
通过上述方式，悬停与选中样式将互不干扰：未选中行悬停显色，已选中行即使悬停也保持高亮，用户体验与视觉反馈完全可控。
