:nth-child和:nth-of-type用法和区别

最新推荐文章于 2022-11-10 07:11:27 发布

ρ²

最新推荐文章于 2022-11-10 07:11:27 发布

阅读量278

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/lfy20/article/details/126609785

版权

选择器

:nth-child(n) 匹配所有属于其父元素的第 N 个子元素的元素，不论元素的类型。
type:nth-child(n) 匹配所有属于其父元素的第 N 个子元素的元素，且元素的类型为type，type可以是选择器。

:nth-of-type(n) 匹配所有属于父元素的第 N 个特定类型的子元素。
type:nth-of-type(n) 匹配所有属于父元素的第 N 个type类型的子素。

<body>
  <h1>这是标题1</h1>
  <p>第1.1个段落。</p>
  <p>第1.2个段落。</p>
  <p>第1.3个段落。</p>
  <p>第1.4个段落。</p>

  <h1>这是标题2</h1>
  <div>
    <p>第2.1个段落。</p>
    <p>第2.2个段落。</p>
    <p>第2.3个段落。</p>
    <p>第2.4个段落。</p>
  </div>

</body>
<style>
  body :nth-child(1){ background: #f000ff; }               /* 匹配标题1和段落2.1 */
  body p:nth-child(1){ color: #00ff00; font-weight: 700; } /* 只匹配段落2.1 */

  body :nth-of-type(2){ background: #ff0f00; }              /* 匹配段落1.2和标题2和段落2.2 */
  body p:nth-of-type(2){ color: #0000ff; font-weight: 700;} /* 匹配段落1.2和段落2.2 */
</style>