【前端 - 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>
① 当鼠标没有悬停在元素上时，其显示默认样式
② 当鼠标悬停在第一个元素时，其显示在代码中设置的妃色样式
③ 当鼠标悬停在第二个元素时，其显示在代码中设置的金黄色样式
注：任何标签都可以设置鼠标悬停状态下的样式
② ：nth - child(n) 选择器示例代码
- <style>
- li:nth-child(2)
- {
- color: red;
- }
- style>
- <body>
- <h3>喜欢做的事情h3>
- <ul>
- <li>唱li>
- <li>跳li>
- <li>rapli>
- <li>篮球li>
- ul>
- body>
注：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>
注：在实际工作当中，并不会都设置以上四个样式，按照需求设置合适的样式。
4、总结
本期的分享总结就到这里了，如果有疑问的小伙伴儿，我们在评论区交流嗷~~~，笔者必回，我们下期再见啦 ！！！
博客中难免存在疏漏和错误之处，皆归因于作者水平有限，诚请各位读者不吝指正 ！
< 前端 - CSS > 专栏系列持续更新 ，欢迎订阅关注 ！
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
在线投稿：投稿 站长QQ：1888636
| 后台-插件-广告管理-内容页尾部广告（手机） |
