可通过:nth-child配合display: none隐藏特定子元素，如ul li:nth-child(3)隐藏第3个li；支持even、odd批量隐藏偶数或奇数项；结合:not可排除某类型元素；注意:nth-child按所有子元素位置计算，需按同类标签计数时应用:nth-of-type。
在CSS中，可以通过 :nth-child 伪类选择器配合 display: none 来隐藏父元素中的特定子元素。这种方法适用于结构规律的子元素，比如列表项、表格行或同级的多个块元素。
使用 :nth-child 隐藏指定位置的子元素
假设有一个无序列表，你想隐藏第3个 元素：
HTML 结构如下：
- 项目1
- 项目2
- 项目3
- 项目4
可以使用以下CSS来隐藏第3个子元素：
立即学习“前端免费学习笔记（深入）”；
ul li:nth-child(3) {display: none;
}
这样，“项目3”将不会在页面中显示。
隐藏偶数或奇数位置的子元素
除了指定具体位置，还可以批量控制显示状态：
- 隐藏所有偶数位置的子元素：
li:nth-child(even) { display: none; } - 隐藏所有奇数位置的子元素：
li:nth-child(odd) { display: none; }
这种写法适合需要隔行隐藏的场景，如表格或网格布局。
排除某个子元素类型（使用 :not）
如果父元素中包含不同标签类型的子元素，想对特定标签应用隐藏规则，可结合 :not 使用：
div > p:not(:first-child) {display: none;
}
这段代码会隐藏 使用 display: none 会完全从文档流中移除元素，影响布局。如果只是想视觉上隐藏但保留空间，可考虑 visibility: hidden 或 opacity: 0。另外，:nth-child 是基于所有子元素的位置计算的，不区分标签类型，若需按同类标签计数，应使用 :nth-of-type。 基本上就这些，合理使用这些选择器能精准控制页面元素的显示逻辑。 中除第一个外的所有 元素。
注意事项
