css伪类的顺序
2015-12-05 本文已影响1724人
饥人谷_张颖莹
首先我们需要知道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的位置很关键它与其他两个的位置会影响一系列样式的效果。
引用
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
