如何在Angular组件中使用CSS :nth-child(odd)设置表格行样式？

问题原因 #

• Angular默认开启**样式封装（ViewEncapsulation）**机制，每个组件的样式仅作用于自身内部的DOM，不会影响其他组件的元素。
• 你将tr:nth-child(odd)写在product-item组件的样式文件中时，每个product-item组件内部只有1个<tr>元素，对每个组件的独立作用域来说，这个<tr>永远是第1个（奇数位置）元素，因此所有行都会命中样式规则。
• 渲染后的实际DOM结构中，<tbody>的直接子元素是<app-product-item>自定义标签，<tr>在自定义标签内部，也导致行元素无法直接继承父级的奇偶位置判断。

解决方法 #

推荐两种可落地的方案：

方案1：父组件穿透样式封装实现 #

直接在Products组件的样式文件products.component.css中添加规则，用::ng-deep临时关闭样式封装：

::ng-deep app-product-item:nth-child(odd) tr {
  background-color: #d46969;
}

该规则会选中奇数位置的product-item组件内部的行，无需修改原有组件结构，适配快速调试场景。

方案2：调整组件为属性选择器，符合表格语义（更推荐） #

修改组件定义避免多余的自定义标签嵌套，后续样式维护更方便：

1. 调整product-item.component.ts的选择器为属性模式：

@Component({
  selector: '[appProductItem]',
  // 其余配置保持不变
})

2. 修改Products组件的HTML代码，直接将组件挂载到<tr>标签上：

<table>
<tbody>
  <tr appProductItem *ngFor="let product of productList" [product]="product"></tr>
</tbody>
</table>

3. 修改product-item组件的HTML，去掉外层<tr>标签，直接保留单元格内容：

<td>{{product.Num}}</td>
<td>{{product.Name}}</td>

4. 之后直接在Products组件的CSS中写常规斑马纹规则即可生效：

tr:nth-child(odd) {background-color: #d46969;}

内容的提问来源于stack exchange，提问作者M.Will