【前端 - 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 选择器示例代码：

    这是一个链接
    
这是一个 div 标签

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

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

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

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

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

    
喜欢做的事情
    

       
唱
       
跳
       
rap
       
篮球
    

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

---

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

超链接一共四个状态 

选择器	作用
：link	访问前
：visited	访问后
：hover	鼠标悬停
：active	点击时（激活）

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

示例代码：

    点击跳转到百度

注：在实际工作当中，并不会都设置以上四个样式，按照需求设置合适的样式。 

---

4、总结

        本期的分享总结就到这里了，如果有疑问的小伙伴儿，我们在评论区交流嗷~~~，笔者必回，我们下期再见啦 ！！！

博客中难免存在疏漏和错误之处，皆归因于作者水平有限，诚请各位读者不吝指正 ！

< 前端 - CSS >  专栏系列持续更新 ，欢迎订阅关注 ！