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

最新推荐文章于 2024-09-01 19:39:37 发布

Aperion

最新推荐文章于 2024-09-01 19:39:37 发布

阅读量1w

点赞数 7

分类专栏： HTML 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_51870334/article/details/131119699

版权

HTML 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

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

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>rap</li>
       <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>