如何使用CSS优雅隐藏表格中第6至18行？

当然可以！你提到的两种方法要么范围太宽泛要么写法太繁琐，其实CSS的:nth-child()伪类支持组合使用，完美解决这个精准选行的需求。

核心实现代码 #

只需要把两个:nth-child()选择器组合起来，就能精准定位第6到18行并隐藏：

table tr:nth-child(n+6):nth-child(-n+18) {
  display: none;
}

原理拆解 #

我们来逐个解释这两个选择器的作用：

• :nth-child(n+6)：选中第6行及之后的所有行（n从0开始计算，0+6=6，1+6=7，以此类推）
• :nth-child(-n+18)：选中第18行及之前的所有行（n从0开始，-0+18=18，-1+18=17，直到-17+18=1）

两者组合后会取交集，也就是刚好选中第6到18行，比逐个写选择器优雅太多，也不会误选后面的行。

兼容性提示 #

这个写法兼容性非常好，所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持，甚至IE9及以上版本也能正常工作，不用担心兼容问题。

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