如何让<tr>继承表格类样式，实现不同表格奇偶行差异化高亮？

你的问题出在CSS选择器写法错误，以及对CSS“层叠”和类继承的误解上，咱们一步步拆解解决：

1. 为什么原CSS不生效？ #

你写的.redtable.odd选择器，含义是选择同时拥有redtable和odd两个类的同一个元素，但你的odd类加在<tr>上，redtable类加在<table>上，这两个类属于不同层级的元素，所以这个选择器根本匹配不到任何目标元素。

2. 正确的CSS写法（两种方案） #

方案一：修正选择器，适配手动加odd类的逻辑 #

如果想保留手动给<tr>标记odd类的方式，需要用后代选择器，明确指定表格下的目标行：

.redtable tr.odd { background-color: red; }
.yellowtable tr.odd { background-color: yellow; }

这样就能精准匹配redtable表格下所有带odd类的<tr>，黄色表格同理。

方案二：自动选中奇数行（更适合数百行的场景） #

既然你不想给每行手动加类，推荐用CSS的:nth-child()伪类，它能自动识别父元素下的第N个子元素，完全不需要额外标记：

.redtable tr:nth-child(odd) { background-color: red; }
.yellowtable tr:nth-child(odd) { background-color: yellow; }

这种方式更高效，浏览器会自动遍历每个表格内的行，把奇数行高亮，不管表格有多少行都能自动生效。

3. 关于“类继承”的误解澄清 #

CSS里的“层叠（Cascade）”指的是样式优先级的叠加规则，和类的继承没有关系。类是元素自身的专属属性，子元素不会自动继承父元素的类——只有部分CSS属性（比如文字颜色、字体）会从父元素继承，而类选择器是严格匹配元素自身的类名的，不会“传递”给子元素。

这样修改后，你的表格就能按预期显示不同颜色的奇数行了。

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