CSS 参考手册 目录

CSS3 :nth-child() 选择器

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

简介

:nth-child() 是一个强大的 CSS3 选择器,用于选择父元素中特定位置的子元素。它基于子元素在父元素中的位置,从 1 开始计数。

语法

-------------

其中:

  • n 是一个整数,表示要选择的子元素在父元素中的位置。

参数

:nth-child() 选择器接受以下参数:

  • n:一个整数,表示要选择的子元素在父元素中的位置。
  • even:选择所有偶数位置的子元素。
  • odd:选择所有奇数位置的子元素。
  • of type:选择特定类型的子元素。例如,:nth-child(2 of type p) 将选择父元素中的第二个 p 元素。

示例

选择父元素中的第一个子元素:

------------- -
  ------ ----
-

选择父元素中的最后一个子元素:

---------------------- -
  ----------------- -----
-

选择父元素中所有偶数位置的子元素:

---------------- -
  ------- --- ----- ------
-

选择父元素中所有奇数位置的子元素:

--------------- -
  ------- --- ----- -------
-

选择父元素中的所有 p 元素的第二个子元素:

------------ -- ---- -- -
  ------------ -----
-

高级用法

:nth-child() 选择器可以与其他选择器组合使用以实现更复杂的选择。例如:

选择父元素中的奇数位置的 li 元素:

-- ----------------- -
  ----------------- ----------
-

选择父元素中除第一个子元素之外的所有子元素:

------------------ -
  -------- -----
-

浏览器支持

:nth-child() 选择器在所有现代浏览器中都得到广泛支持。

浏览器 支持
Chrome
Firefox
Safari
Edge
Internet Explorer 9+

注意事项

  • :nth-child() 选择器基于元素的文档顺序,而不是显示顺序。
  • 隐藏的元素仍然会被 :nth-child() 选择器计数。
  • 对于具有动态内容的页面,:nth-child() 选择器可能会产生意外的结果。
  • 使用 :nth-child() 选择器时要小心,因为它可能会导致性能问题。

下一篇:CSS 参考手册