CSS选择器 2

原创已于 2024-08-27 17:07:02 修改 · 2.4k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

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

Web 专栏收录该内容

4 篇文章

订阅专栏

本文详细解释了CSS伪类选择器:first-child,:last-child,:nth-child(n),:first-of-type和:last-of-type在HTML元素中的应用，通过实例说明它们如何在DOM结构中定位特定元素并设置样式。

该文章已生成可运行项目，

一、关系选择器

1.1 后代选择器

定义：

选择所有被E元素包含的F元素，中间用空格隔开

语法：

1.2 子代选择器

定义：

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用 > 表示

语法：

1.3 相邻兄弟选择器

定义：

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素

语法：

1.4 通用兄弟选择器

定义：

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开

语法：

二、伪类选择器【1】

2.1 超链接相关(:hover、:link、:visited、:active)

:link “链接”：超链接点击之前（只适用于a）
:visited “访问过的”：链接被访问过之后（只适用于a）
:hover “悬停”：鼠标放到标签上的时候（适用于所有标签）
:active “激活”：鼠标点击标签，但是不松手时。（适用于所有标签）

注意：如果四种状态都要使用，必须按照顺序

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

:first-child 选中所有兄弟元素中的第一个
:last-child 选中所有兄弟元素中的最后一个
:nth-child(n) 选中所有兄弟元素中的第n个
:first-of-type 选中所有同类型兄弟元素中的第一个
:last-of-type 选中所有同类型兄弟元素中的最后一个
:nth-of-type(n) 选中所有同类型兄弟元素中的第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,案例中没有满足条件的标签，也就是匹配不上，所以没有标签的背景变绿色。

2.3 关于: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的子代中选择。