学css前要搞懂的选择器的优先级和权重问题

admin

css的优先级之前一直没怎么注意没当回事，总以为对同一元素靠后的渲染会覆盖前面的渲染，要是覆盖不了那就来个!important嘛。直到我那在学前端基础的后端伙伴拿一个问题问住了我，我才意识到这是重点中的重点啊！啪啪啪打脸！

优先级关系先来看css为元素添加样式的几种规则（优先级a>b>c>d，!important无敌）

标记	a	b	c	d
规则	使用行内样式style	使用id选择器	使用类、属性、伪类选择器	使用元素、伪元素选择器
例子	style=""	#id	class 、 [type="submit'] 、 :hover	p、::after

权重计算用a,b,c,d分别表示相关规则出现的次数

选择符	权重(a,b,c,d)	权值
style=""	(1,0,0,0)	1000
#wrapper #content	(0,2,0,0)	200
#content .datePosted	(0,1,1,0)	110
div #content{}	(0,1,0,1)	101
#content	(0,1,0,0)	101
p.comment .datePosted{}	(0,0,2,1)	21
p.comment{}	(0,0,1,1)	11
div p{}	(0,0,0,2)	2
p	(0,0,0,1)	1
.container .row .col-left	(0,0,3,0)	30
.col-left	(0,0,1,0)	10

补充


1.虽然提高选择器的权重值能有效解决靠后的渲染失败问题，但也仅仅是个解决方法，渲染不冲突的情况下，不要写那么多累赘
2.!important虽无敌和style虽一人之下，但都应尽量避免使用
3.在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式。