CSS表格.myrow类奇偶行样式异常：仅奇数行背景色生效

看起来你这是把CSS选择器写得太复杂，反而把逻辑搞乱了😂。咱们一步步来梳理问题，再给出简单可靠的解决方案：

问题根源 #

你当前的CSS代码用了大量冗余且逻辑绕的组合选择器，比如.myrow:nth-child(even) ~ .myrow:nth-of-type(odd)这类，不仅容易出错，还会导致样式匹配优先级混乱。另外，你给所有.myrow默认设置了background: #f8f8f8，这会直接覆盖后续可能的偶数行样式（除非优先级更高，但你的复杂选择器反而没做到这点）。

加上Angular的ng-container是虚拟容器，不会生成实际DOM元素，所以*ngFor循环出来的.myrow（应该是<tr>标签吧？）是直接作为<tbody>的子元素存在的，完全不需要那些复杂的选择器。

正确解决方案 #

直接用最简的奇偶行选择器就足够了，替换掉你原来的所有CSS代码：

/* 奇数行背景色 */
.myrow:nth-child(odd) {
  background: #f8f8f8;
}

/* 偶数行背景色 */
.myrow:nth-child(even) {
  background: blue;
}

为什么这个能生效？ #

• :nth-child(odd/even)会直接根据父元素（这里是<tbody>）下的子元素位置计数，匹配第1、3、5...或第2、4、6...个.myrow元素。
• 因为ng-container不生成DOM，循环出来的行是连续的子元素，计数不会被干扰。
• 这个选择器的优先级（类选择器+伪类）比单纯的.myrow高，能确保奇偶样式分别生效，不会互相覆盖。

额外检查点 #

如果替换后还是有问题，你可以排查这两点：

• 确认.myrow确实是<tr>元素，且父元素（比如<tbody>）下没有其他非.myrow的<tr>，否则:nth-child会把这些无关行也算进计数里。如果有无关行，改用:nth-of-type(odd/even)即可：

  .myrow:nth-of-type(odd) { background: #f8f8f8; }
  .myrow:nth-of-type(even) { background: blue; }
  

• 检查有没有其他CSS规则覆盖了这个样式（可以用浏览器开发者工具查看元素的样式面板，看background属性是否被划掉）。

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