关于css媒体查询中的选择器权重的问题

@media中的选择器的优先级

---

今天写响应式页面的时候发现了个问题在这里记录一下

.content .right-box {
	width: 240px;
	float: right;
}

我写的页面是三栏式布局.在内容盒子里面我分成了左右两个盒子,上面的代码是我对内容盒子的右盒子设置的样式,我想的是做成响应式后左后盒子不再左右分布而是上下分布,所以我的媒体查询代码如下:

@media screen and (max-width:980px) {
	.right-box{
		float: none;
	}
}

后来我发现我预期的效果并没有发生,起先我以为是我代码写的又问题,不过我检查了好几遍并没有发现错误.后来我在控制台发现我设置的float:none并没有生效,这时候我想到可能是选择器的权重问题,于是我改成了下面的代码

	.content .right-box{
		float: none;
	}

事实证明确实是选择器权重的原因.

总结

虽然媒体查询中的选择器比外面的选择器的优先级要高但是还是要遵循选择器的权重.拿上面的例子来说,我起先以为是当媒体查询生效后之前的样式会失效然后使用媒体查询中的样式,但是并不是这样的.媒体查询应该是会覆盖之前的样式而不是让之前的样式生效.在之前我对右边盒子设置浮动的时候选择器权重是20但是我媒体查询中的针对右边盒子的选择器的权重是10,虽然媒体查询中的选择器优先级会高于外面的选择器但是那是在权重相同的情况下来说的,如果权重不相等则媒体查询是不会生效的.