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

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

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
(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,所以最终应用后者样式。