【前端 – CSS】第 16 课 – 伪类选择器（鼠标悬停状态）

本文介绍: 在 CSS中，我们使用 hover表示该元素在鼠标悬停状态下的样式。

欢迎来到博主 Ap e iron 的博客，祝您旅程愉快！时止则止，时行则行。动静不失其时，其道光明。

1、缘起

在 CSS 中，我们使用 hover 表示 该元素在鼠标悬停状态下的样式 。

2、伪类 选择器

伪类依附于已存在的元素，使用冒号作为标识，描述元素在某特性或状态下的样式。工作中常用的伪类选择器如下：

选择器	作用
：hover	鼠标悬停状态
：ac tiv e	鼠标点击（按下不放）时激活
：focu s	获得焦点
：vi site d	已访问的链接（a 标签）
：lin k	未访问的链接（a 标签）
：ch e c k e d	勾选状态的表单标签
：first – child	第一个子元素
：last – child	最后一个子元素
：nth – child（）	指定索引的子元素

鼠标悬停状态 – 语法：选择器：hover { CSS 属性 }

① ：hover 选择器示例代码：

<style&gt;
     /* 金黄色 */
     .box:hover{
         color: #ffd700;  //妃色
     }

     /* 妃色 */
     a:hover{
         color:#ed5736;  //金黄色
     }
</style&gt;



<body&gt;
    <a href="#"&gt;这是一个链接</a>
    <div class="box">这是一个 div 标签</div>
</body>

① 当鼠标没有悬停在元素上时，其显示默认样式

② 当鼠标悬停在第一个元素时，其显示在代码中设置的妃色样式

③ 当鼠标悬停在第二个元素时，其显示在代码中设置的金黄色样式

注：任何标签都可以设置鼠标悬停状态下的样式

② ：nth – child(n) 选择器示例代码

<style>
      li:nth-child(2)
      {
       color: red;
      }
</style>


<body>
    <h3>喜欢做的事情</h3>
    <ul>
       <li>唱</li>
       <li>跳</li>
       <li>rap</li>
       <li>篮球</li>
    </ul>
</body>

注：nth-child(odd) 选中奇数行子元素，nth-child(e v en) 选中偶数行子元素。

3、伪类 – 超链接（拓展）

超链接一共四个状态

选择器	作用
：lin k	访问前
：vi sited	访问后
：hover	鼠标悬停
：active	点击时（激活）

注：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。

示例代码：

<style>
     /* 妃色 */
     a:link{
         color:#ed5736;
     }

     a:visited{
         color:#ffd700;
     }

     a:hover{
         color:blueviolet;
     }

     a:active{
         color:#000000;
     }
</style>


<body>
    <a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
</body>