tr:nth-child(2)选不到第二行是因为nth-child按DOM顺序计数，受thead/tfoot或colspan/rowspan影响；应改用tbody > tr:nth-of-type(2)精准定位数据行。
表格中用 tr:nth-child(2) 为什么选不到第二行？
因为 nth-child 是按 DOM 顺序计数，不是按“可见行”或“数据行”计数。如果表格里有 <thead>、<code><tfoot> 或者被 <code>colspan/rowspan 打乱结构的单元格，计数就会偏移。
实操建议：
- 优先用语义化结构：把标题行放进
<thead>，数据行统一放 <code><tbody>，再用 <code>tbody tr:nth-child(2) - 想选第 n 条数据行，用
tbody > tr:nth-of-type(n)更稳——它只看同级tr元素，忽略thead/tfoot - 避免在
tr上直接写display: none，这不会影响nth-child计数；改用visibility: hidden或删掉节点 -
td:first-of-type→ 匹配“张三”那一列（第一个td） -
td:nth-of-type(1)→ 同样匹配“张三”，因为它是该tr下第一个td - 但
th:first-of-type会匹配“姓名”，而th:nth-of-type(1)也匹配它——两者在此场景无区别 - 真正容易出错的是
:nth-of-type(2)：它跳过th，只在td中数，所以仍匹配“25”列；而:nth-child(2)会匹配“张三”（整个子元素序列中第 2 个） - 表头文字加粗居中：
thead th { font-weight: bold; text-align: center; } - 奇偶行背景交替：
tbody tr:nth-child(odd) { background-color: #f9f9f9; }（注意：必须限定在tbody内，否则thead的tr也会被算进去） - 鼠标悬停高亮整行：
tbody tr:hover { background-color: #e6f7ff !important; }（加!important是防被奇偶行规则覆盖） - 首列固定不滚动（配合
position: sticky）：tbody td:first-child, thead th:first-child { position: sticky; left: 0; background: white; } - 想控制行边框：改用
td, th { border-top: 1px solid #ddd; }，再用thead th { border-top: none; }去掉表头顶边 - 想让
tr独立显边框：先设table { border-collapse: separate; border-spacing: 0; }，再给tr加border，但要注意这会破坏默认紧凑布局，可能需手动调border-spacing - 更稳妥的“行分割线”方案：用
tbody tr:not(:last-child) { border-bottom: 1px solid #eee; }配合td { border-bottom: none; }
td:first-of-type 和 td:nth-of-type(1) 在表格里效果一样吗？
表面上一样，但底层逻辑不同：前者匹配“第一个出现的 td 类型元素”，后者匹配“同级中第 1 个 td”。在标准表格中（tr > td, tr > th），它们通常等价；但一旦混用 th 和 td，差异就暴露了。
比如这一行：<tr>
<th>姓名</th>
<td>张三</td>
<td>25</td>
</tr>
立即学习“前端免费学习笔记（深入）”；
如何用类型选择器 + 伪类精准控制表头和奇偶行样式？
别堆叠太多层级，从容器语义出发最可靠。表格自带结构优势，善用 <thead>、<code><tbody>、<code><th> 这些天然类型标签，比全靠 <code>class 更轻量且抗干扰。
推荐写法：
为什么给 tr 设置 border 没反应？
表格默认是 border-collapse: collapse，此时 tr 不接收边框样式——边框实际由 td/th 渲染，tr 只是容器。这是初学者最常卡住的点。
解决路径分两种：
