css伪类的顺序

最新推荐文章于 2023-10-11 16:12:43 发布

huzhenv5

最新推荐文章于 2023-10-11 16:12:43 发布

阅读量1.1k

点赞数 2

分类专栏： CSS 文章标签： css 伪类顺序

原文链接：https://www.jianshu.com/p/c7d766e9dfdd

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

首先我们需要知道css伪类是用来添加一些选择器的特殊效果。

link 表示的是正常情况下链接的样式。
visit 代表链接访问后的样式，则链接一旦被访问，则之后它的样式就会是你所设置的visited样式。
hover 在鼠标移到链接上时添加的特殊样式。
focus 在一个元素成为焦点时生效，用户可以通过键盘或鼠标激活焦点。
active 在一个元素处于激活状态（鼠标在元素上按下还没有松开）时所使用的样式。
hover 理论上任何元素都可以使用的，focus多是针对表单的，如input等。而active多用于链接。

顺序

这四种伪类存在着一定的顺序，称为LVHA顺序。各个样式之间的顺序很有讲究，一旦出现排列错误就很有可能形成覆盖，导致其中某个样式无法显示。

比如，link与visit的位置是随意的。但hover，focus，active则必须按照focus–hover–active这个顺序。
link与visit的位置是任一的是因为link指的是元素被访问前的样式，而visit这指的是访问后的。而其他三个则与css的就近原则有关。
比如

<style>
a:focus{
	background-color:red;
}
a:hover {
	background-color:yellow;
}   
a:active{
	background-color:black;
}
</style>
<body>
<a href="#">zyy</a>
</body>

在这段代码中当我们时，我们把鼠标放上去是，会显示黄色
在这里插入图片描述
点击时显示的是黑色

松开后是黄色移开鼠标是红色

然后我试着将这三个css的顺序变换得到了下面的结果（h：hover，a：active，f：focus）

	悬停	点击	松开	焦点
fha	yellow	black	yellow	red
fah	yellow	yellow	yellow	red
afh	yellow	yellow	yellow	red
ahf	yellow	red	red	red
haf	yellow	red	red	red
hfa	yellow	black	red	red

分析

由表格可以看出hover的位置不会影响悬停时样式的颜色，但它会间接影响其他两种样式的效果。
active必须要在focus，hover的后面，否则就会被覆盖。
focus的位置很关键它与其他两个的位置会影响一系列样式的效果。

引用

http://www.bubuko.com/infodetail-767726.html
http://hovertree.com/hvtart/bjae/v8e7w4u1.htm
http://www.w3school.com.cn/cssref/selector_hover.asp
http://www.bkjia.com/webzh/873587.html

huzhenv5

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css伪类的顺序

首先我们需要知道css伪类是用来添加一些选择器的特殊效果。link 表示的是正常情况下链接的样式。visit 代表链接访问后的样式，则链接一旦被访问，则之后它的样式就会是你所设置的visited样式。hover 在鼠标移到链接上时添加的特殊样式。focus 在一个元素成为焦点时生效，用户可以通过键盘或鼠标激活焦点。active 在一个元素处于激活状态（鼠标在元素上按下还没有松开）时所使用的样式。hover 理论上任何元素都可以使用的，focus多是针对表单的，如input等。而active多
复制链接

扫一扫