0Pricing
CSS Academy · 课时

:nth-child 与 :nth-of-type

使用 nth 公式和类型选择器，根据元素在父元素中的位置进行选择。

:nth-child 与 :nth-of-type 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是结构伪类

结构伪类根据元素在父元素中的位置来选择元素。它们无需添加类或 JavaScript，就能定位特定的子元素。

:first-child 和 :last-child

选择父元素的第一个或最后一个子元素：

<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>

:nth-child() 基础

:nth-child(n) 根据元素在任意类型的兄弟元素中的位置来选择元素，位置编号从 1 开始。

<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>

:nth-child() 与关键字

请使用关键字 odd 或 even 设置交替行样式：

<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>

:nth-child() 与公式

请使用公式 An+B，其中 A 表示步长，B 表示偏移量。n 从 0 开始递增。

  • 3n —— 每三个一个（3、6、9……）
  • 3n+1 —— 每三个中的第一个（1、4、7……）
  • -n+3 —— 仅前三个项目
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

:nth-of-type()

:nth-of-type() 只统计相同元素类型的兄弟元素，忽略其他元素。元素类型混合时，这一点非常重要。

<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>

:first-of-type 和 :last-of-type

在兄弟元素中选择特定标签类型的第一个或最后一个元素：

<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />

:nth-child() 与 :nth-of-type() 的区别

主要区别：

  • p:nth-child(2) —— 如果第二个子元素是 <p>，则选择它
  • p:nth-of-type(2) —— 无论存在其他元素，都选择第二个 <p>

:only-child 和 :only-of-type

:only-child 会选择父元素唯一的子元素。:only-of-type 会选择父元素中唯一属于该类型的元素。

<div><p>I'm the only child in this div.</p></div>

:nth-child 与 of S 选择器（现代语法）

现代 CSS 允许使用 :nth-child(An+B of selector) 过滤参与 nth 公式计数的元素：

<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>

实际应用：最后一行的网格间距

移除最后一个可见元素的底部外边距：

<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>

快速检查

哪个选择器会选中从第一个开始的每第三个列表项？

回顾

:nth-child() 按位置统计所有兄弟元素；:nth-of-type() 只统计相同标签的兄弟元素。请使用 odd/even 设置条纹表格。An+B 公式无需添加类，就能实现“每三个一个”或“前五个”等强大的模式。

常见问题解答

「:nth-child 与 :nth-of-type」课时是免费的吗？

是的 — 「:nth-child 与 :nth-of-type」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「:nth-child 与 :nth-of-type」这节课中我会学到什么？

使用 nth 公式和类型选择器，根据元素在父元素中的位置进行选择。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「:nth-child 与 :nth-of-type」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. :hover、:focus、:active 与 :visited
  2. :nth-child 与 :nth-of-type
  3. :not()、:is() 与 :where()
  4. :checked、:disabled 与表单状态伪类
← 返回 CSS Academy