css伪类的顺序

来源：互联网发布：酷狗截铃声软件编辑：程序博客网时间：2024/05/15 16:55

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）

悬停点击松开焦点fhayellowblackyellowredfahyellowyellowyellowredafhyellowyellowyellowredahfyellowredredredhafyellowredredredhfayellowblackredred

分析

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

0 0