作者 饥人谷_张颖莹 关注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 |
新闻热点
疑难解答
