:nth-child(-n+3) 是唯一能精准隐藏前三个 tr 的纯 css 方案，需确保 tr 是父容器的前三个子元素；若表格含 thead，应写 tbody tr:nth-child(-n+3)；结构混乱时须改用 js 切片。
用 CSS 选择器直接匹配前三个 tr 元素最稳妥
隐藏前三行不需要 JS 遍历或动态计算索引，:nth-child(-n+3) 是唯一能精准命中且不依赖 class/id 的纯 CSS 方案。它在 thead、tbody 或无结构的 table 中都有效，前提是目标 tr 是其父容器的前三个子元素。
- 如果表格有
thead，且你想隐藏的是tbody里的前三行，得写tbody tr:nth-child(-n+3)，否则thead的tr会被一起算进去 - 若表格结构混乱（比如
tr外套了div或其他非表格元素），:nth-child会失效，此时必须改用 JS +querySelectorAll('tr')手动切片 - 别用
:first-child连写三次——它只匹配第一个子元素，无法表达“前三个”
tr:nth-child(-n+3) { display: none; } 必须配合 display: table-row 恢复
用 display: none 隐藏后，恢复时不能写 block 或空字符串，浏览器会忽略。CSS 规则被移除后，tr 会回退到默认的 table-row，但 JS 动态控制时必须显式设回：
- 错误写法：
el.style.display = ''→ 可能继承父级或外部样式，结果不可控 - 正确写法：
el.style.display = 'table-row'，或更推荐：用 class 切换，如el.classList.remove('hidden-first-3') - 如果已用
hidden属性隐藏（el.hidden = true），恢复时只需el.hidden = false，无需管display值
JS 动态隐藏前三行时，table.rows 和 querySelectorAll 行为不同
这两者返回结果不一致，直接影响统计逻辑。比如你要算“可见行数”，用错 API 就会漏数据或重复计数：
-
table.rows是 HTMLCollection，自动排除display: none和hidden的tr，但**不**排除visibility: hidden的 -
table.querySelectorAll('tr')返回所有tr节点，无论是否隐藏，需手动过滤：Array.from(table.querySelectorAll('tr')).filter(tr => !tr.hidden && getComputedStyle(tr).display !== 'none') - 如果你用
for (let i = 0; i ，注意 <code>rows来源要是table.querySelectorAll('tr')，不是table.tBodies[0].rows——后者可能不含thead行，索引错位
响应式场景下，隐藏前三行容易和媒体查询冲突
如果同时用了媒体查询（比如小屏下隐藏某些列），display: none 的层叠优先级可能被覆盖。尤其当外部 CSS 有 !important 或更高 specificity 的规则时：
- 避免在媒体查询里直接写
tr:nth-child(-n+3) { display: none !important; }，会锁死状态，JS 无法覆盖 - 推荐统一用 class 控制：
.hide-first-3 tr:nth-child(-n+3) { display: none; }，然后用 JS 切换table的 class - 如果表格是服务端渲染且含敏感字段（如密码行），前三行恰好是模板生成的固定结构，
document.currentScript.closest('tr')不适用——它只能定位脚本所在行，没法批量操作
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
