可通过: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个 <li> 元素：

HTML 结构如下：

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
</ul>

可以使用以下CSS来隐藏第3个子元素：

立即学习“前端免费学习笔记（深入）”；

ul li:nth-child(3) {
  display: none;
}

这样，“项目3”将不会在页面中显示。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

隐藏偶数或奇数位置的子元素

除了指定具体位置，还可以批量控制显示状态：

• 隐藏所有偶数位置的子元素：
  li:nth-child(even) { display: none; }
• 隐藏所有奇数位置的子元素：
  li:nth-child(odd) { display: none; }

这种写法适合需要隔行隐藏的场景，如表格或网格布局。

排除某个子元素类型（使用 :not）

如果父元素中包含不同标签类型的子元素，想对特定标签应用隐藏规则，可结合 :not 使用：

div > p:not(:first-child) {
  display: none;
}

这段代码会隐藏 <div> 中除第一个外的所有 <p> 元素。

注意事项

使用 display: none 会完全从文档流中移除元素，影响布局。如果只是想视觉上隐藏但保留空间，可考虑 visibility: hidden 或 opacity: 0。另外，:nth-child 是基于所有子元素的位置计算的，不区分标签类型，若需按同类标签计数，应使用 :nth-of-type。

基本上就这些，合理使用这些选择器能精准控制页面元素的显示逻辑。