Angular 14项目中如何实现PrimeNG表格偶数行高亮？

问题原因 #

你写的选择器没命中正确的DOM元素——PrimeNG的p-table生成的表格行（tr）是嵌套在.p-datatable-tbody容器里的，而且PrimeNG自带的表格样式优先级比你写的高，导致样式被覆盖。

方案一：精准选择器+提高优先级 #

修改你的SCSS代码，把选择器写得更具体，确保能选中目标行：

:host ::ng-deep .p-datatable .p-datatable-tbody tr:nth-child(even) {
    background-color: #ADADAD;
}

如果还是不生效，可加!important强制覆盖（特殊场景下使用）：

:host ::ng-deep .p-datatable .p-datatable-tbody tr:nth-child(even) {
    background-color: #ADADAD !important;
}

方案二：用PrimeNG自带的条纹属性（更推荐） #

PrimeNG表格原生支持条纹效果，直接在组件上开启striped属性：

<p-table [value]="你的数据列表" [striped]="true">
  <!-- 这里编写你的列定义 -->
</p-table>

再自定义条纹颜色，覆盖默认样式：

:host ::ng-deep .p-datatable-striped .p-datatable-tbody tr:nth-child(even) {
    background-color: #ADADAD;
}

这种方式更贴合PrimeNG的设计逻辑，无需手动处理奇偶行判断。

额外提醒 #

可以用浏览器开发者工具（F12）查看表格的DOM结构，确认tr的父元素类名，确保选择器精准命中目标元素。

内容的提问来源于stack exchange，提问作者AhmedSHA256