由 a标签的hover无效 引起的反思

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39396275/article/details/89643570

问题发现

在写界面的时候发现这个小问题，HTML结构如下：

<div class="tab_r f-18">
		<ul>
				<li><a href="">首页</a></li>
				<li><a href="">产品特色</a></li>
				<li><a href="">软件下载</a></li>
				<li><a href="">关于我们</a></li>
		</ul>
 </div>

改变a标签原有的蓝色后，想要实现鼠标在标签上悬停时，菜单字体颜色改变。css如下：

//选中a标签，设置颜色，颜色改变
.tab_r ul li a{
	color: #000;
}
//设置悬停时字体颜色
a:hover {color: #fe0100; text-decoration:none;}
//悬停时，无变化

hover失效。

分析原因

我感到很疑惑，为什么还会失效呢？
然后我就去掉按标签前面的三个标签，直接写成：

 a{
	color: #000;
}

hover竟然可以用了
但是我还是不知道原因，就进行百度，得到了一个答案。

是权重的原因， .tab_r ul li a{} 这个的权重是12，而伪类 hover的权重是10 ，所以显示的还是之前定义的颜色。

解决办法

悬停的css代码写成下面形式：

.tab_r ul li a:hover {color: #fe0100; text-decoration:none;}

权重扩展

通配选择符的权值 0,0,0,0
标签的权值为 0,0,0,1
类、属性、伪类的权值为 0,0,1,0
ID的权值为 0,1,0,0
important的权值为最高 1,0,0,0

使用规则：

权值的大小跟选择器的类型和数量有关
样式的优先级跟样式的定义顺序有关
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择