伪类link,visited,hover,focus,active

最新推荐文章于 2023-03-06 10:41:53 发布

梦游的游_

最新推荐文章于 2023-03-06 10:41:53 发布

阅读量764

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_43860573/article/details/109646398

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

		CSS 又名 层叠样式表，所谓层叠，就是后面的样式会覆盖前面的样式，所以在样式表中，
各样式排列的顺序很有讲究。 
		:link 与 :visited 在样式文件中的顺序可以随便放置。
		而focus， hover，active这几个，如果你设置的顺序不同，会直接影响样式的显示效果，
下面会详细解释。

		这边我就不上代码一一例举了，我直接上一段正确的样式代码，大家可以直接去测试，变换位置去思
考一下，基本就懂了，不懂的可以来找我探讨。

		## css
		<style>
			a:link{color:chartreuse}
			a:visited {
				color: blueviolet;
			}
			a:hover{color:aqua}
			button:hover {
				background-color:aqua;
			}
			a:focus{color:blue}
			button:focus {
				background-color:blue;
			}
			a:active{color:red}
			button:active {
				background-color:red;
			}
		</style>
		## html
		<body>
			<div class="layui-fluid">
				<a href="##" style="font-size:220px;">ws </a>
				<button class="layui-btn aa">我是按钮</button>
				<button class="layui-btn">123</button>
			</div>
		</body>
这边是引入的layui的css  让按钮变得好看一点。

总结：
link表示链接在正常情况下（即页面刚加载完成时）显示的颜色。

visited表示链接被点击后显示的颜色。

hover表示鼠标悬停时显示的颜色。

focus表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用（鼠标松开时显示的颜色）。

active表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的颜色。

#注：伪类的顺序应为link–visited–hover–focus–active。
不懂的地方可以留言交流~~

梦游的游_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪类link,visited,hover,focus,active

CSS 又名层叠样式表，所谓层叠，就是后面的样式会覆盖前面的样式，所以在样式表中，各样式排列的顺序很有讲究。 :link 与 :visited 在样式文件中的顺序可以随便放置。而focus， hover，active这几个，如果你设置的顺序不同，会直接影响样式的显示效果，下面会详细解释。这边我就不上代码一一例举了，我直接上一段正确的样式代码，大家可以直接去测试，变换位置去思考一下，基本就懂了，不懂的可以来找我探讨。 ## css <style> a..
复制链接

扫一扫