HTML5 与 CSS3 基础语法自学教程(二十五)

本文首发于 【前端课湛】 微信公众号。可以在微信里搜索【 前端课湛 】关注,第一时间看文章!

导读:本小节主要讲解 CSS 中的结构伪类选择器的内容,其中包含了结构伪类选择器的概念以及各个结构伪类选择器的用法。虽然结构伪类选择器不一定要和表格元素配合使用,但在表格元素中使用结构伪类是最为常见的应用之一。

什么是结构伪类选择器

CSS 中的结构伪类选择器是根据 HTML 页面中元素之间的关系来定位 HTML 元素,从而减少对 HTML 元素的 id 属性和 class 属性的依赖。

CSS 结构伪类选择器如下表所示:

伪类选择器 作用
selector:first-child 用来定位一组兄弟元素中的第一个元素
selector:last-child 用来定位一组兄弟元素中的最后一个元素
selector:nth-child(n) 用来定位一组兄弟元素中的第 n 个元素
selector:nth-last-child(n) 用来定位一组兄弟元素中倒序方式的第 n 个元素
selector:first-of-type 用来定位一组同类型的兄弟元素中的第一个元素
selector:last-of-type 用来定位一组同类型的兄弟元素中的最后一个元素
selector:nth-of-type(n) 用来定位一组同类型的兄弟元素中的第 n 个元素
selector:nth-last-of-type(n) 用来定位一组同类型的兄弟元素中倒序方式的第 n 个元素
selector:only-child 用来定位一个没有任何兄弟元素的元素
selector:only-of-type 用来定位一个没有任何同类型兄弟元素的元素
selector:empty 用来定位一个没有子级元素的元素,并且该元素也没有任何文本内容
selector:root 用来定位 HTML 页面中的根元素( <html>

在上述表中,使用到的 n 是一个整数,而且是从 1 开始的正整数。也就是说,第一个元素的序号是 1,不是 0。当 n 的值为 0 时,则表示不定位任何 HTML 元素。

:first-child 与 :last-child

:first-child 伪类是 CSS2 版本中的选择器。在最初定义 :first-child 伪类时,所定位的这一组兄弟元素是必须具有父级元素的。从 CSS4 版本开始,父级元素已经不再是必须的。

:last-child 伪类则是 CSS3 版本中新增的选择器。使用 :last-child 伪类时,需要注意浏览器的兼容性问题。

如下示例代码展示了 :first-child 伪类和 :last-child 伪类的用法:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>first-child与last-child伪类</title>
  <style>
    #example-element td {
      background-color: lightsalmon;
      padding: 5px 10px;
    }

    #example-element td:first-child {
      border-top-left-radius: 5px;
    }

    #example-element td:last-child {
      border-top-right-radius: 5px;
    }
  </style>
</head>

<body>
  <table id="example-element">
    <tr>
      <td>公司介绍</td>
      <td>产品中心</td>
      <td>新闻动态</td>
    </tr>
  </table>
</body>

</html>

上述示例代码运行效果如下图所示:

03-01.png

:first-child 伪类可以使用 :nth-child(n) 伪类改写为 :nth-child(1),而 :last-child 伪类可以使用 :nth-last-child(n) 伪类改写为 :nth-last-child(1)。

:first-child 伪类和 :last-child 伪类经常会引起误解。例如 td:first-child 是用来定位所有 <td> 元素中第一个作为子级元素的,而不是定位 <td> 元素的第一个子级元素。

:first-of-type 与 :last-of-type

:first-of-type 伪类和 :last-of-type 伪类都是 CSS3 版本新增的选择器。在最初定义 :first-of-type 伪类时,所定位的这一组兄弟元素是必须具有父级元素的。从 CSS4 版本开始,父级元素已经不再是必须的。

如下示例代码展示了 :first-of-type 伪类和 :last-of-type 伪类的用法:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>first-of-type与last-of-type伪类</title>
  <style>
    table {
      display: table;
      border: 1px solid #139;
      width: 100%;
    }

    td,
    th {
      border: 2px solid #a19;
      padding: .25rem .5rem;
    }

    #example-element td:first-of-type,
    #example-element td:last-of-type {
      text-align: center;
    }
  </style>
</head>

<body>
  <table id="example-element">
    <tbody>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>地点</th>
      </tr>
      <tr>
        <th>1</th>
        <td>李雷</td>
        <td>北京</td>
      </tr>
      <tr>
        <th>2</th>
        <td>韩梅梅</td>
        <td>上海</td>
      </tr>
      <tr>
        <th>3</th>
        <td>露西</td>
        <td>深圳</td>
      </tr>
      <tr>
        <th>4</th>
        <td>小明</td>
        <td>鹤岗</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

上述示例代码运行效果如下图所示:

03-02.png

:first-of-type 伪类与 :last-of-type 伪类的用法一定要和 :first-child 伪类与 :last-child 伪类的用法区分开。以 :first-of-type 伪类和 :first-child 伪类为例来说明:

  • :first-of-type 伪类是定位一组同类型的兄弟元素中的第一个元素,不管这个元素在兄弟元素中的位置如何。

  • :first-child 伪类是定位一组兄弟元素中的第一个元素,这些兄弟元素不一定是同类型的。

如果将上述示例代码中的 :first-of-type 伪类改写为 :first-child 伪类的话,将不会生效。如下图所示:

03-03.png

:nth-child(n) 与 :nth-last-child(n)

:nth-child(n) 伪类和 :nth-last-child(n) 伪类都是 CSS3 版本新增的选择器,这两个选择器的用法基本上是一致的。区别在于 :nth-last-child(n) 伪类是倒序方式定位元素,也就是说,:nth-last-child(n) 伪类是从一组元素的结尾开始的。

接下来,主要以 :nth-child(n) 伪类为例进行讲解。:nth-child(n) 伪类中的 n 参数的含义具有 3 种情况:

  • 数字值:任意一个大于 0 的正整数。例如 #example td:nth-child(1) 表示定位 ID 为 example 的父元素下所有 元素中的第一个元素。

  • 关键字:odd 表示奇数,等同于 :nth-child(2n);even 表示偶数,等同于 :nth-child(2n+1)。

  • 格式为 (an+b) 公式:a 表示周期的长度( 步长 ),n 表示计数器( 从 0 开始 ),而 b 则表示偏移值。

如下示例代码展示了 :nth-child(n) 伪类的用法:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>nth-child伪类</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    td {
      padding: 5px;
      border-top: 2px solid lightslategray;
      text-align: center;
    }

    table tr:nth-child(1) {
      font-weight: bold;
    }

    table tr:nth-child(odd) {
      background-color: lightgray;
    }
  </style>
</head>

<body>
  <table id="example-element">
    <tbody>
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>地点</td>
      </tr>
      <tr>
        <td>1</td>
        <td>李雷</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>2</td>
        <td>韩梅梅</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>3</td>
        <td>露西</td>
        <td>深圳</td>
      </tr>
      <tr>
        <td>4</td>
        <td>小明</td>
        <td>鹤岗</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

上述示例代码运行效果如下图所示:

03-04.png

:nth-child(n) 伪类的 n 参数用法中比较复杂的是使用 (an+b) 公式用法,如下示例列举了一些公式用法:

  • :nth-child(5n):定位元素的序号是 5 [=5×1]、 10 [=5×2]、 15 [=5×3] 等。

  • :nth-child(3n+4):定位元素的序号是 4 [=(3×0)+4]、 7 [=(3×1)+4]、 10 [=(3×2)+4]、 13 [=(3×3)+4] 等。

  • :nth-child(-n+3):定位元素的序号是 3 [=-0+3]、 2 [=-1+3]、 1 [=-2+3]。

:nth-child(n) 伪类与 :nth-last-child(n) 伪类和 :nth-of-type(n) 伪类与 :nth-last-of-type(n) 伪类的区别,类似于 :first-of-type 伪类与 :last-of-type 伪类和 :first-child 伪类与 :last-child 伪类的区别。

:empty

:empty 伪类是用来定位没有任何子级元素或文本内容的元素,其中文本内容包含了空白。但是 HTML 的注释是不影响 :empty 伪类定位元素的。

如下示例代码展示了 :empty 伪类的用法:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>empty伪类</title>
  <style>
    .box {
      background: pink;
      height: 80px;
      width: 80px;
      float: left;
      margin-left: 20px;
    }

    .box:empty {
      background: lime;
    }
  </style>
</head>

<body>
  <div class="box"><!-- 这是一个注释 --></div>
  <div class="box">这个元素的背景是粉色的</div>
  <div class="box">
    <!-- 这是一个注释 -->
  </div>
</body>

</html>

上述示例代码运行效果如下图所示:

03-05.png

总结

本小节讲解了 CSS 伪类选择器中的结构伪类选择器,结构伪类选择器是根据 HTML 元素之间的关系来定位 HTML 页面中的元素。学习的过程中需要注意相似结构伪类选择器之间的区别,以及 CSS 版本的问题。

预告:下一章,我们将讲解 CSS 中的盒子模型内容。

如要转载本文,请先加作者微信( 2080954535 ,与 QQ 同号),获得转载许可。原创不易,请尊重作者劳动!

作者二维码.png
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章