欢迎来到博主 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 >  专栏系列持续更新 ，欢迎订阅关注 ！

推荐链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：