nth-child(n)和nth-of-type(n)

原创于 2019-04-26 10:27:45 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nth-child #nth-of-type

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文详细解析了CSS中nth-child(n)与nth-of-type(n)选择器的使用方法及区别，通过实例展示了如何针对不同类型的子元素进行精确样式控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

:nth-child(n)：父元素的子元素的第n个

:nth-of-type(n)：父元素的某类子元素的第n个

注：n从0起，元素index从1起

nth-child(n)和nth-of-type(n)例：

<head>
  <style>
  	body :nth-child(2) {
      height: 30px;
      background: blue;
      color: #fff;
  	}
  </style>
</head>
<body>
  <p>1 - p1</p>
  <div>2 - div1</div>
  <p>3 - p2</p>
  <div>4 - div2</div>
</body>

在这里插入图片描述

替换 :nth-child 为 :nth-of-type

<style>
	body :nth-of-type(2) {
      height: 30px;
      background: blue;
      color: #fff;
  	}
</style>

在这里插入图片描述