hover失效的一个和权重有关的原因

下面我们先来看一个代码:

在这里插入图片描述
这串代码很明显,当鼠标放在这个50*50的方块上时,方块的颜色会由白杏色变成黑色。此时不管是把css中的div和div:hover如何放置,结果都不会变。
那么请在来看看这个:
在这里插入图片描述
此时的hover效果却消失了
在这里插入图片描述
然而把div:hover和div.box换一下位置便会使重新达到原来的目的,那么为什么会这样呢?
这就关系到了权重的问题了。
标签选择器的权重值为1
class选择器和伪类的权重值都为10
写在同一行的选择器的权重值要全部相加起来比较
此时div:hover和div.box的权重值都为11,所以后一个的样式会覆盖在前一个上,因此导致了hover失效。
(其实一般情况下我们新手很少选择去用交集选择器(既上文中的div.box),大多用父子选择器或直接用class选择)

发布了27 篇原创文章 · 获赞 31 · 访问量 2640

猜你喜欢

转载自blog.csdn.net/weixin_46102597/article/details/104228185
今日推荐