问题浅述:
最近做项目,为了方便。在初始化公共样式里定义了:
a:hover{
color: red;
}
开始用的好好的,后面有个列表链接不是默认色。就更改颜色。如下:
.box li a {
color: skyblue;
}
结果 a:hover 就不生效了???
问题验证:
F12 调试,显示是被层叠掉了。因为没有其他 hover ,基本判断 权重 优先级问题。
目前 权重:
.box li a =12
a:hover =11
为了验证权重问题,我做了一些比较无聊的操作。
我稍微 改了一下权重:
目前 权重:
.box a =11
a:hover =11
权重一样,样式还是被层叠是因为 先后顺序问题。a:hover是公共样式,引入再页面最前面。
所以被后来的 样式层叠掉了。
为了进一步验证,我又稍微 改了一下权重:
目前 权重:
.box a =11
li a:hover =12
结果:全局样式的 a:hover 真的生效了,看来真的是权重问题。
样式相同时,就看优先级和权重,即便在 :hover 伪类中的样式也是一样。
问题解决:
1、如果项目中做的 :hover样式都是一样的。 没有别的色。可以加 ! important;
也就是当前属性无穷大的意思。当然,为了标准化,很不推荐这种做法。
a:hover { color: red!important; }
2、如果 a 标签,颜色样式改变。建议重新写 a:hover 样式。
别偷懒了,也别纠结了,重新写吧。
by不言谢