伪类——根据鼠标点击状态显示、伪元素

最新推荐文章于 2023-06-29 17:29:19 发布

易拉易拉罐

最新推荐文章于 2023-06-29 17:29:19 发布

阅读量4.6k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/wuxiao18/article/details/95978728

版权

对于<a>链接标签来说，在网页中让其根据是否访问来显示状态颜色

由于涉及到用户隐私问题，因此涉及到visited伪类只能设置字体颜色，其中hover和active也可以为其他元素设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*未访问过*/
			a:link{
				color:red;
			}
			/*访问过*/
			a:visited{
				color: yellow;
			}
			/*鼠标移入*/
			a:hover{
				color:green;
			}
			/*表示超链接被点击状态*/
			a:active{
				color:black;
			}
			/*获取焦点*/
			input:focus{
				/*文本框获取焦点后背景颜色改变为红色*/
				background-color: red;
			}
			/*为p标签中选中的内容设置状态*/
			p::selection{
				background-color: orange;
			}
			
		</style>

	</head>
	<body>

		<a href="http://www.baidu.com">访问标签</a>
		<br />
		<a href="http//:www.baidu123456.com">未访问标签</a>	
		<br />
		<p>这是一个段落咿呀呀呀呀</p>
		<!--创建文本输入框-->
		<input type="text" / >
	<

最低0.47元/天解锁文章

易拉易拉罐

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
伪类——根据鼠标点击状态显示、伪元素

对于<a>链接标签来说，在网页中让其根据是否访问来显示状态颜色由于涉及到用户隐私问题，因此涉及到visited伪类只能设置字体颜色，其中hover和active也可以为其他元素设置<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><...
复制链接

扫一扫

专栏目录