devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：weixin_40725706 | 2024-06-12 10:07:58

赞

踩

css伪类

你好，我是云桃桃。

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

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

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

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

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

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

前言

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

  1. 用户交互状态：伪类可以根据用户的操作状态来应用样式，如:hover 用于鼠标悬停状态。

  2. 链接状态：链接伪类如:link、:visited、:hover、:active 用于控制链接在不同状态下的样式，帮助用户区分未访问链接、已访问链接以及鼠标悬停和激活链接。

  3. 子元素选择：伪类如:first-child、:last-child、:nth-child()等用于选择元素的特定子元素，方便实现对布局和内容的精确控制。

  4. 表单元素状态：伪类如:valid、:focus、:checked 等可用于控制表单元素在不同状态下的样式，增加表单的可用性和友好性。

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

  1. selector:pseudo-class {
  2.   property: value;
  3. }

那我们一起来看看吧。

4 类常见的 CSS 伪类

一、 基本伪类

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

  1. a:link {
  2.   color: blue;
  3. }
  4.  
  5. a:visited {
  6.   color: red;
  7. }
  8.  
  9. a:hover {
  10.   color: green;
  11. }
  12.  
  13. a:active {
  14.   color: yellow;
  15. }
  16. /* 鼠标聚焦到input上的背景颜色 */
  17. input:focus {
  18.   background-color: #00f;
  19. }

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

  1. /*  鼠标悬停在div上时的背景颜色 */
  2. div:hover {
  3.   background-color: yellow;
  4. }
  5. div p:hover {
  6.   background-color: yellow;
  7. }

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

图片

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>伪类示例</title>
  7.     <style>
  8.       /* 全局样式 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       body {
  15.         padding: 20px;
  16.       }
  17.       /* 标签样式 */
  18.       .menu {
  19.         width: 100px;
  20.         color: #fff;
  21.         line-height: 40px;
  22.         background-color: #dc5757;
  23.         cursor: pointer; /* 鼠标悬停时显示手型 */
  24.         transition: background-color 0.3s ease;
  25.         text-align: center;
  26.       }
  27.       /* 悬停样式 */
  28.       .menu:hover {
  29.         background-color: #9f2b2b;
  30.       }
  31.       /* 菜单样式 */
  32.       .child-menu-list {
  33.         display: none;
  34.         position: absolute;
  35.         list-style-type: none;
  36.         background-color: #fff;
  37.         width: 100px;
  38.         border-radius: 5px;
  39.         box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  40.       }
  41.       /* 悬停时显示菜单 */
  42.       .menu-box:hover .child-menu-list {
  43.         display: block;
  44.       }
  45.       /* 菜单项样式 */
  46.       .child-menu-list li {
  47.         margin: 5px 0;
  48.       }
  49.       .child-menu-list li a {
  50.         display: block;
  51.         padding: 5px 10px;
  52.         text-decoration: none;
  53.         color: #333;
  54.       }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <div class="menu-box">
  59.       <p class="menu">这是导航</p>
  60.       <ul class="child-menu-list">
  61.         <li><a href="#">菜单1</a></li>
  62.         <li><a href="#">菜单2</a></li>
  63.         <li><a href="#">菜单3</a></li>
  64.       </ul>
  65.     </div>
  66.   </body>
  67. </html>

效果如下：

图片

二、 结构伪类

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

  1. :before 和 :after： 这两个伪类用于在元素的内容前后插入生成的内容，比如添加一些装饰性的内容或图标，在标题前添加引用符号、在链接后添加外部链接图标等。

  2. :first-child 和 :last-child： :first-child选择器匹配其父元素的第一个子元素，:last-child选择器匹配其父元素的最后一个子元素。比如，设置列表的第一个元素的特殊样式或者下图 tb 的，最后一个元素，不需要右侧边框。

    图片

  3. :nth-child(n) 和 :nth-last-child(n)： 这两个伪类选择器根据子元素在父元素中的位置选择元素，:nth-child(n)选择第 n 个子元素，:nth-last-child(n)选择倒数第 n 个子元素。比如，实现列表中间隔行样式或者每隔 3 个元素:nth-child(3n)就有特定的样式等。

  4. :nth-of-type(n) 和 :nth-last-of-type(n)： 与上面的类似，不过这两个伪类选择器是基于子元素的类型进行选择，而不是在整个子元素中进行选择。比如选择表格中某一列的所有单元格、选择特定类型的列表项等。

  5. :only-child 和 :only-of-type： :only-child选择器匹配没有兄弟元素的元素，:only-of-type选择器匹配其父元素中特定类型的唯一一个子元素。

那我们来看看代码吧。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Pseudo-class Example</title>
  7.     <style>
  8.       /* 添加装饰性内容 */
  9.       h1:before {
  10.         content: '「';
  11.       }
  12.       h1:after {
  13.         content: '」
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/707640
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。