tr:nth-of-type无法实现混合样式效果，因其仅按同级tr元素计数且受表格多层结构影响；应使用tbody tr:nth-child(odd/even)等限定作用域的选择器，并注意dom稳定性。
不能直接用 tr:nth-of-type 实现“第3行加边框+奇偶背景不同”这类混合效果。 它只按 tr 类型计数，不理解“视觉行序”，也不能在一个规则里同时控制多个样式属性。
为什么 tr:nth-of-type(odd) 在表格里经常失效
HTML 表格结构天然混有 thead、tbody、tfoot 等容器节点，而 nth-of-type 只统计同级中同为 tr 的兄弟元素——但这些 tr 往往不在同一父级下。比如：
| Name |
|---|
| Alice |
| Bob |
此时 thead tr 和 tbody tr 不是兄弟关系，tr:nth-of-type(odd) 在各自父容器内分别计数，结果就是：每个 tr 都算作“第1个”，全部命中 odd。
- 实际项目中，
tr:nth-of-type(even)常常和tr选择器效果一致，根本没起到隔行作用 - 如果中间插了
<tr class="summary">，它仍会被计入序号，但你可能想跳过它 <li>框架（如 Ant Design、Element Plus）生成的表格常把 <code>tr渲染在tbody外或用display: contents，这时nth-of-type直接失效 - 写
tbody tr:nth-child(odd)→ 正确：只对tbody下的tr计数，且按它们在tbody中的实际位置排 - 写
tr:nth-child(odd)→ 危险：会把thead tr也算作第1个，导致表头变色 - 写
table tr:nth-child(odd)→ 更危险：如果table直接子元素不是tr（而是thead），这条规则根本不会匹配任何tr
tr:nth-child(odd) 才是更可靠的选择，但必须限定作用域
nth-child 按 DOM 顺序数所有子元素，所以它能跨容器识别“第几行”，前提是选对父容器：
示例（安全写法）：
tbody tr:nth-child(odd) { background-color: #f8f9fa; }
tbody tr:nth-child(even) { background-color: #ffffff; }
tbody tr:nth-child(3) { border-top: 2px solid #007bff; }
注意第三条：它和前两条不冲突，因为 nth-child(3) 的 specificity 更高，会覆盖 even 或 odd 的背景设置（但不会影响边框）。
要实现“前5行奇偶变色 + 第6行起每4行一组”，必须拆规则
单一伪类无法承载多段逻辑，硬套 nth-of-type(3n+1) 之类只会让维护变成噩梦。正确做法是分段限定范围：
- 前5行：用
tbody tr:nth-child(-n+5):nth-child(odd)（第1、3、5行） - 第6行起：用
tbody tr:nth-child(n+6)再叠加循环，例如tr:nth-child(n+6):nth-child(4n+0)匹配第8、12、16行 - 所有规则必须按顺序书写，后写的同权重规则会覆盖前面的
- 避免用
!important，改用更具体的选择器，比如tbody.data-table tr:nth-child(3)
真正容易被忽略的，不是语法怎么写，而是 DOM 结构是否稳定——只要某次数据渲染插入了一个 <tr class="loading">，所有基于序号的规则就偏移了。动态表格建议配合 JS 打 class，CSS 只负责 class 样式。 </tr>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
