本文详解 angular material 表格中行选中（selection）与鼠标悬停（hover）样式相互覆盖的根本原因，并提供高优先级 css 选择器、正确类名作用域及关键样式修复方案，确保 hover 效果不干扰选中状态。

本文详解 angular material 表格中行选中（selection）与鼠标悬停（hover）样式相互覆盖的根本原因，并提供高优先级 css 选择器、正确类名作用域及关键样式修复方案，确保 hover 效果不干扰选中状态。

在使用 Angular Material 的

实现可交互表格时，开发者常遇到一个典型问题：当用户点击某行触发选中（例如通过 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 类直接写在

上并依赖 [class.hovered] 动态绑定——Material 的 :hover 会实时生效，与你的类逻辑不同步；应直接利用原生 :hover 伪类；

若使用 SelectionModel 管理选中状态，请确保模板中正确绑定：

<tr mat-row row columns: displayedcolumns></tr>

Angular v17+ 使用 .mat-mdc-* 类名前缀，旧版（v15 及之前）为 .mat-*，请根据实际版本调整选择器。

通过上述方式，悬停与选中样式将互不干扰：未选中行悬停显色，已选中行即使悬停也保持高亮，用户体验与视觉反馈完全可控。