前端第一阶段-13（伪类、伪元素）

BadVictory

已于 2022-08-11 11:16:54 修改

阅读量269

点赞数

分类专栏： # 前端开发第一阶段文章标签：前端 html html5 visual studio

于 2022-08-05 11:44:27 首次发布

本文链接：https://blog.youkuaiyun.com/Victory_bad/article/details/126150863

版权

前端开发第一阶段专栏收录该内容

20 篇文章

订阅专栏

本文介绍了前端开发中的伪类和伪元素概念，重点讲解了伪类`:hover`的应用，包括如何改变自身、兄弟元素和子元素的样式。同时，提到了伪元素用于定义元素特定部分样式的功能，展示了相关代码示例和效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

伪类

伪类用来添加一些选择器的特殊效果

伪类
伪类	说明
:hover	鼠标移入（适用于所有标签）
:active	鼠标按下到抬起（一般常用于 a 和 button 标签，适用于所有标签）
a:link	链接访问前（只适用于a标签）
a:visited	链接访问后（只适用于a标签）
:first-child	匹配第一个元素 div:first-child{}，匹配第一个div元素 div span:first-child{}，匹配所有div下面的第一个span元素 div:first-child span{}，匹配第一个div下面所有span元素
:nth-child(n)	匹配第n个元素 div:nth-child(2){}，匹配某个元素下面的第二个div元素
:not(选择器)	不是某个选择器的元素 :not(div){}，选择非div的元素
:disabled	禁用元素 input:disabled{}，选择被禁用的input元素
:check	选中元素 input:check{}，选择被选中的input元素

⚠️a:hover 必须放在 a:link 和 a:visited之后

⚠️a:active 必须在 a:hover 之后

⚠️a:active 必须在 CSS 定义中的 a:hover 之后才能生效

以上三个总结就是lvha原则，LVHA 顺序：:link— :visited— :hover — :active

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 
        /* ⚠️
        * :hover 必须放在 a:link 和 a:visited之后
        * :active 必须在 a:hover 之后 */
        a{
            /* 去除下划线 */
            text-decoration: none;   
        }
        /* 未访问 */
        a:link{
            color: #888;
        }
        /* 已访问 */
        a:visited{
            color: aquamarine;
        }
        /* 鼠标放上去的状态 */
        a:hover{
            color: rgb(82, 48, 84);
        }
        /* 激活状态，鼠标按下抬起 */
        a:active{
            color: #000;
        }
    </style>
</head>
<body>
    <a href="http://news.baidu.com/">新闻</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="https://www.hao123.com/?src=from_pc_logon">hao123</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="https://map.baidu.com/">地图</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="https://image.baidu.com/">图片</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="https://pan.baidu.com/">网盘</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="https://www.baidu.com/more/">更多</a>
</body>
</html>

效果：

伪类:hover

:hover改变自己

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: green;
        font-size: 12px;
      }

      /* hover 改变自己 */
      p:hover {
        color: red;
        /* 鼠标改成手型 */
        /* 提醒用户此处可以点击 */
        cursor: pointer;

        /* 自己字体大小变成20px */
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>鼠标放上去变成红色</p>
  </body>
</html>

默认效果：

鼠标放上面效果：

:hover改变兄弟

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 很少用 */
      .box1 {
      }
      .box2 {
      }
      /* hover box1 让兄弟 box2改变颜色 */
      .box1:hover + .box2 {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
  </body>
</html>

默认效果：

鼠标放到box1上面效果：

:hover改变儿子

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        height: 100px;
        width: 100px;
        border: 1px solid red;
        background: pink;
      }
      .son {
        color: red;
        font-size: 16px;
      }
      /* hover 父亲让儿子发生改变 */
      /* 
        父亲:hover 儿子{}
      */
      .father:hover .son {
        color: blue;
      }

      .father:hover p {
        color: purple;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <p>p标签</p>
      <div class="son">儿子</div>
    </div>
  </body>
</html>

默认效果：

鼠标放到father 上面效果：

伪元素

伪元素是一个附加在选择器末尾的关键词，通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。

伪元素
伪元素	说明
::before	在... 前面加（天生具有行内特性，主要用于加符号）
::after	在... 后面加（天生具有行内特性，主要用于加符号）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 10px;
        }
        /* 伪元素：主要用于加符号 */
        /* before在前面加 */
        .box::before{
            content:"￥";
            color:red;
        }
        /* after在后面加 */
        .box::after{
            content: "%";
            color:aquamarine;
        }

        .square::after{
            content: "2";
            
        }
    </style>
</head>
<body>
    <div class="box">1000</div>
    <div class="square">25</div>
</body>
</html>

效果：