伪类选择器

作者：代码探险家 | 2024-07-18 12:49:13

踩

伪类选择器

特点：

在任何选择器后，添加伪类选择器可以设置鼠标悬停在该元素上时，该元素展现的样式。

需要标签：

a标签

浏览器会给a标签默认添加一些样式

a标签有4种状态：

（1）a:link（未访问过的链接）

（2） a:hover（鼠标经过，也就是鼠标指针放在该元素上时）

（3）a:active（当前激活链接,也就是点击鼠标左键时）

（4）a:visited（已访问过）

伪类选择器：

1.hover

hover是一种状态，表示当鼠标放在元素上的时候，当鼠标悬浮在标签上时的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*当鼠标悬浮在a标签上时的样式*/
a:hover{
color: blue;
}
</style>
</head>
<body>
<li><a href="https://www.baidu.com">百度</a></li>
</body>
</html>

a:hover{

color:blue;

}

表示，当鼠标放在页面中的a标签上时，标签内文字的颜色将变为蓝色

2active

当鼠标按下a标签没有松手的时候的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*当鼠标按下a标签没有松手的时候的样式*/
a:active{
color: green;
}
</style>
</head>
<body>
<li><a href="https://www.sina.com.cn">新浪</a></li>
</body>
</html>

a:active{
color: green;
}

表示，当鼠标放在页面中的a标签上时，标签内文字的颜色将变为绿色

:3visited

当a标签的目标页面被访问过的时候的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*当a标签的目标页面被访问过的时候的样式*/
a:visited{
color: red;
}
</style>
</head>
<body>
<li><a href="https://ai.taobao.com/">淘宝</a></li>
</body>
</html>

           a:visited{
               color: red;
           }

表示，当鼠标放在页面中的a标签上时，标签内文字的颜色将变为红色

4 cursor

表示鼠标放在在元素上时，指针的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*当a标签的目标页面被访问过的时候的样式*/
a:cursor{
pointer
}
</style>
</head>
<body>
<li><a href="https://www.qq.com/">腾讯</a></li>
</body>
</html>

鼠标放在该元素上，会展示出一个小手

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/845729

伪类选择器

特点：

在任何选择器后，添加 伪类选择器可以设置鼠标悬停在该元素上时，该元素展现的样式。

需要标签：

a标签

a标签有4种状态：

（1）a:link（未访问过的链接）

（2） a:hover（鼠标经过，也就是鼠标指针放在该元素上时）

（3）a:active（当前激活链接,也就是点击鼠标左键时）

（4）a:visited（已访问过）

伪类选择器：

1.hover

2active

:3visited

4 cursor

在任何选择器后，添加伪类选择器可以设置鼠标悬停在该元素上时，该元素展现的样式。