css伪类的顺序

最新推荐文章于 2025-02-17 20:35:27 发布

qq_31749287

最新推荐文章于 2025-02-17 20:35:27 发布

阅读量574

点赞数

分类专栏：前端

前端专栏收录该内容

30 篇文章

订阅专栏

css伪类的顺序

作者饥人谷_张颖莹关注

2015.12.05 16:46 字数 605 阅读 342 评论 3 喜欢 2

首先我们需要知道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的就近原则有关。
比如

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

在这段代码中当我们时，我们把鼠标放上去是，会显示黄色

hover

点击时显示的是黑色

active

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

focus

然后我试着将这三个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的位置很关键它与其他两个的位置会影响一系列样式的效果。