【前端 - CSS】第 16 课 - 伪类选择器（鼠标悬停状态）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端 - CSS】第 16 课 - 伪类选择器（鼠标悬停状态）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

1、缘起

2、伪类选择器

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

4、总结

1、缘起

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

2、伪类选择器

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

选择器	作用
：hover	鼠标悬停状态
：active	鼠标点击（按下不放）时激活
：focus	获得焦点
：visited	已访问的链接（a 标签）
：link	未访问的链接（a 标签）
：checked	勾选状态的表单标签
：first - child	第一个子元素
：last - child	最后一个子元素
：nth - child（）	指定索引的子元素

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

① ：hover 选择器示例代码：

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

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



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

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

css鼠标悬停样式,HTML,css,前端,html

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

css鼠标悬停样式,HTML,css,前端,html

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

css鼠标悬停样式,HTML,css,前端,html

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

② ：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>

css鼠标悬停样式,HTML,css,前端,html

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

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

超链接一共四个状态

选择器	作用
：link	访问前
：visited	访问后
：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>

css鼠标悬停样式,HTML,css,前端,html