Home >Web Front-end >HTML Tutorial >Pseudo-class hover is invalid, about the priority of CSS_html/css_WEB-ITnose
Pseudo-class hover is invalid, about the priority of CSS_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:28913browse
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> a:hover{ color: #B61D1D; } .tag_a{ color: #333; } .tag_ul a{ color: #333; } </style></head><body> //hover失效 <ul class="tag_ul"> <li><a>用ul标签选中</a></li> </ul> //hover失效有效 <ul> <li><a class="tag_a">用a标签选中</a></li> </ul></body></html> 有没有大神 帮我解释一下 关于class的优先级！
回复讨论(解决方案)
25edfb22a4f469ecb59f1190150159c670fc1228f17d1dc106bac25faac1017a用a标签选中5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
加上href
既然楼主自己都试出加class后有效，，，那就加个class不就好了。。。
顺序为
a
a:visited
a:hover
a:active
权重(摘自《CSS实战手册》)
引入
示例
f2a2f5eb7ce6ea9f9046b879ccd8ccc5
9a2d986b0a01d0ca882b4d7eaaacb8b8
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a8121115db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a8122225db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a8123335db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
a {background-color: blue ;}
.nav li a {background-color: silver;}
531ac245ce3e4fe3d50054a55f265927
The background color of 3499910bf9dac5ae3c52d5ede7383485?
Weight calculation
Principle
Determine the weight of the style based on the value assigned to the style selector (label selector, class selector, ID selector)
> Ways
A tag selector 1 point
A class selector 10 points
An ID selector 100 points
A built-in style 1000 points
Example
.navBox a
10 1 = 11 points
.navBox .nav a
10 10 1 = 21 points
.nav a
10 1 = 11 points
.nav li a
10 1 1 = 12 points
Notes
1) Inherited attributes do not have any weight value
2) When the weight values are the same, the last style wins
3) List all external style sheets first, Then incorporate the internal style.
Ignore the weight value
Description
CSS provides a way to completely ignore the weight value.
When you must and must ensure a specific When the properties of the property are not overridden by another more specific style,
You can use this technique
Just insert !important after the property that needs to be protected to avoid being overwritten by a property with a greater weight.
Example
.navBox .nav a {background-color: red;}
a {background-color: black!important;}