CSS结构伪类选择器详解

徐晓率

已于 2024-01-25 18:21:22 修改

阅读量794

点赞数 20

分类专栏： CSS 文章标签： css 前端

于 2024-01-25 16:34:12 首次发布

本文链接：https://blog.csdn.net/weixin_69053029/article/details/135842024

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

:first-child 选中所有兄弟元素中的第一个
:last-child 选中所有兄弟元素中的最后一个
:nth-child(n) 选中所有兄弟元素中的第n个
:first-of-type 选中所有同类型兄弟元素中的第一个
:last-of-type 选中所有同类型兄弟元素中的最后一个
:nth-of-type(n) 选中所有同类型兄弟元素中的第n个

Ⅰ.关于:first-child，:last-child，:nth-child(n)

  <body>
    <h2>这是第1标题</h2>
    <p>这是第1个p标签</p>
    <li>这是第1个列表</li>
    <p>第2个p标签</p>
    <p>第3个p标签</p>
    <p>第4个p标签</p>
    <h2>这是第2个标题</h2>
    <div>
      <p>这是div下的第1个p标签</p>
      <p>这是div下的第2个p标签</p>
      <p>这是div下的第3个p标签</p>
      <li>这是div下的第1个列表</li>
      <p>这是div下的第4个p标签</p>
      <li>这是div下的第2个列表</li>
    </div>
  </body>
  <style>
    body p:first-child {
      background-color: red;
    }
    body p:last-child {
      background-color: green;
    }
    body p:nth-child(3) {
      background-color: yellow;
    }
  </style>

以上是一个案例，:nth-child(n) 给我的感觉像是去匹配，p:nth-child(n)，就是去找父元素下的第n个‘孩子’，这个孩子必须满足它是p标签，才能被选中。理解这个概念，就能很好理解p:first-child和p:last-child。回到案例，“这是div下的第1个p标签”变红，原因是我们在body的子代(儿子,孙子......)中寻找第一个孩子并且这个孩子是p标签，满足这两个条件，它才能被选中，我们才能给它添加背景色(red)。“这是第1个p标签”背景没变成红色，是因为它是body的第二个孩子，匹配不上。同理适用于:last-child,案例中没有满足条件的标签，也就是匹配不上，所以没有标签的背景变绿色。

Ⅱ.关于:first-of-type，:last-of-type，:nth-of-type(n)

  <body>
    <h2>这是第1标题</h2>
    <p>这是第1个p标签</p>
    <li>这是第1个列表</li>
    <p>第2个p标签</p>
    <p>第3个p标签</p>
    <p>第4个p标签</p>
    <h2>这是第2个标题</h2>
    <div>
      <p>这是div下的第1个p标签</p>
      <p>这是div下的第2个p标签</p>
      <p>这是div下的第3个p标签</p>
      <li>这是div下的第1个列表</li>
      <p>这是div下的第4个p标签</p>
      <li>这是div下的第2个列表</li>
    </div>
  </body>
  <style>
    body p:first-of-type {
      background-color: red;
    }
    body p:last-of-type {
      background-color: green;
    }
    body p:nth-of-type(3) {
      background-color: yellow;
    }
  </style>

针对于:nth-of-type(n)，它给我的感觉就是去寻找，先去把类型符合的标签找出来，再去找第n个。直白点说，p:nth-of-type(n)就是去找第n个p标签，这符合我们平常的理解。说到这，我相信各位能够理解，p:last-of-type就是选择最后一个p标签，同理，p:first-of-type就是选择第一个p标签。值得注意的是，以上案例都是在body的子代中选择。