CSS3-伪类选择器

最新推荐文章于 2022-11-22 17:55:55 发布

香辣素毛肚

最新推荐文章于 2022-11-22 17:55:55 发布

阅读量157

点赞数

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

本文链接：https://blog.csdn.net/qq_34153210/article/details/105679719

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

1.伪类选择器：

1.1静态伪类选择器

:link 选择一个未访问的超链接

:visited 选择一个已访问的超链接

例子：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		a:link{color: red}
  		a:visited{color: yellow}
	</style>
</head>
<body>
	<a href="https://www.qq.com/" target="_blank" >腾讯</a>
</body>
</html>

未点击按钮前是红色，点击完之后变成其它颜色。

这里有一个问题，点击完毕后刷新页面，或者关闭浏览器重新打开，不能再现这个行为，只能修改href地址，才能又显示为红色。感觉是否访问过跟链接地址有关。

1.2动态伪类选择器

:focus 选择焦点所在的元素

:hovor 鼠标停留的元素

:active 输入激活的元素

测试如下

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		button:focus{color: yellow}
  		button:hover{color:purple }
  	    button:active{color:red }
	</style>
</head>
<body>
	<button>按钮</button> 
</body>
</html>

这个激活的选择器就是一瞬间，需要仔细看

香辣素毛肚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3-伪类选择器

1.伪类选择器：1.1静态伪类选择器:link 选择一个未访问的超链接:visited 选择一个已访问的超链接例子：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> a:link{color: red} ...
复制链接

扫一扫