CSS伪类大全！4大类伪类详解

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

284篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

伪类（Pseudo-class）是 CSS 中一种用于选择元素特定状态或行为的选择器。它们允许我们根据用户操作、元素的位置或其他特定条件来应用样式，从而增强页面的交互性和可读性。伪类在 CSS 中具有重要的作用和用途：

用户交互状态：伪类可以根据用户的操作状态来应用样式，如:hover 用于鼠标悬停状态。
链接状态：链接伪类如:link、:visited、:hover、:active 用于控制链接在不同状态下的样式，帮助用户区分未访问链接、已访问链接以及鼠标悬停和激活链接。
子元素选择：伪类如:first-child、:last-child、:nth-child()等用于选择元素的特定子元素，方便实现对布局和内容的精确控制。
表单元素状态：伪类如:valid、:focus、:checked 等可用于控制表单元素在不同状态下的样式，增加表单的可用性和友好性。

伪类的语法是如下（选择器:伪类），

selector:pseudo-class {
  property: value;
}

那我们一起来看看吧。

4 类常见的 CSS 伪类

一、基本伪类

用于选择特定状态的元素，如:link、:visited、:hover、:active、:focus。

a:link {
  color: blue;
}

a:visited {
  color: red;
}

a:hover {
  color: green;
}

a:active {
  color: yellow;
}
/* 鼠标聚焦到input上的背景颜色 */
input:focus {
  background-color: #00f;
}

不止有 a 标签可以 hover，其他元素也可以 hover，比如以下写法，也可以：

/*  鼠标悬停在div上时的背景颜色 */
div:hover {
  background-color: yellow;
}
div p:hover {
  background-color: yellow;
}

这个 hover 可是大有用处！比如，写出一个tb导航的 hover 的导航菜单。

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类示例</title>
    <style>
      /* 全局样式 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        padding: 20px;
      }
      /* 标签样式 */
      .menu {
        width: 100px;
        color: #fff;
        line-height: 40px;
        background-color: #dc5757;
        cursor: pointer; /* 鼠标悬停时显示手型 */
        transition: background-color 0.3s ease;
        text-align: center;
      }
      /* 悬停样式 */
      .menu:hover {
        background-color: #9f2b2b;
      }
      /* 菜单样式 */
      .child-menu-list {
        display: none;
        position: absolute;
        list-style-type: none;
        background-color: #fff;
        width: 100px;
        border-radius: 5px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
      }
      /* 悬停时显示菜单 */
      .menu-box:hover .child-menu-list {
        display: block;
      }
      /* 菜单项样式 */
      .child-menu-list li {
        margin: 5px 0;
      }
      .child-menu-list li a {
        display: block;
        padding: 5px 10px;
        text-decoration: none;
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="menu-box">
      <p class="menu">这是导航</p>
      <ul class="child-menu-list">
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
      </ul>
    </div>
  </body>
</html>

效果如下：

二、结构伪类

用于选择特定结构状态的元素。

:before 和 :after： 这两个伪类用于在元素的内容前后插入生成的内容，比如添加一些装饰性的内容或图标，在标题前添加引用符号、在链接后添加外部链接图标等。
:first-child 和 :last-child： :first-child选择器匹配其父元素的第一个子元素，:last-child选择器匹配其父元素的最后一个子元素。比如，设置列表的第一个元素的特殊样式或者下图 tb 的，最后一个元素，不需要右侧边框。
:nth-child(n) 和 :nth-last-child(n)： 这两个伪类选择器根据子元素在父元素中的位置选择元素，:nth-child(n)选择第 n 个子元素，:nth-last-child(n)选择倒数第 n 个子元素。比如，实现列表中间隔行样式或者每隔 3 个元素:nth-child(3n)就有特定的样式等。
:nth-of-type(n) 和 :nth-last-of-type(n)： 与上面的类似，不过这两个伪类选择器是基于子元素的类型进行选择，而不是在整个子元素中进行选择。比如选择表格中某一列的所有单元格、选择特定类型的列表项等。
:only-child 和 :only-of-type： :only-child选择器匹配没有兄弟元素的元素，:only-of-type选择器匹配其父元素中特定类型的唯一一个子元素。

那我们来看看代码吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pseudo-class Example</title>
    <style>
      /* 添加装饰性内容 */
      h1:before {
        content: '「';
      }
      h1:after {
        content: '」😆';
      }

      /* 设置第一个和最后一个段落的样式 */
      .box1 p:first-child {
        font-weight: bold;
        background-color: #ffcc00;
      }
      .box1 p:last-child {
        border-bottom: 5px solid #ee7474;
      }

      /* 间隔行样式 */
      ul li:nth-child(3n) {
        background-color: #2dcf56;
      }

      /* 设置第二个表格列的单元格样式 */
      table tr td:nth-of-type(2) {
        font-style: italic;
        color: #4330ba;
      }

      /* 选择唯一类型的子元素 */
      .box2:only-child {
        border: 1px solid #333;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Title</h1>
    <div class="box1">
      <p>This is the first paragraph.</p>
      <p>This is the second paragraph.</p>
      <p>This is the third paragraph.</p>
    </div>

    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
    </ul>

    <table>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
      </tr>
    </table>

    <div class="box2">
      <p>Only Child Element</p>
    </div>
  </body>
</html>

效果如下：

这些伪类元素提供了强大的选择器功能，可以根据元素的结构状态选择目标元素，使得样式控制更加灵活和精确。

三、否定伪类

用于选择特定状态的元素，如:not()。

/* 选择ul中除了类名为exclude的li元素 */
ul li:not(.exclude) {
  color: #20b45e;
}

效果如下：

四、UI 伪类

用于选择特定 UI 状态的元素，这个通常用到 form 表单中，如:enabled、:disabled、:checked、:indeterminate。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UI State Pseudo-classes Example</title>
    <style>
      /* 用于选择已启用的输入框 */
      input:enabled {
        border: 2px solid #008000;
      }

      /* 用于选择已禁用的输入框 */
      input:disabled {
        background-color: #f9c8c8;
      }

      /* 用于选择已被选中的复选框 */
      input[type='checkbox']:checked {
        transform: scale(2.2); /* check选中以后，放大复选框 */
      }

      /* 用于选择具有不确定状态的复选框，不透明度设置成 0.2 */
      input[type='checkbox']:indeterminate {
        opacity: 0.2;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" placeholder="请输入用户名" required />
      <br /><br />
      <label for="password">电话：</label>
      <input type="text" id="phone" name="phone" placeholder="请输入密码" required />
      <br /><br />
      <label for="password">密码：</label>
      <input disabled type="password" id="password" name="password" placeholder="请输入密码" required />
      <br /><br />
      <label for="remember">记住我：</label>
      <input type="checkbox" id="remember" name="remember" />
      <br /><br />
      <label for="subscribe">订阅新闻简报：</label>
      <input type="checkbox" id="subscribe" name="subscribe" checked />
      <br /><br />

      <input type="submit" value="提交" />
    </form>

    <script>
      // 注意：需要手动设置复选框的不确定状态，直接设置该属性不起效
      document.querySelector('input[type="checkbox"]').indeterminate = true
    </script>
  </body>
</html>

效果如下：