CSS 权重以及优化
Animate 状态 > !important > 行内样式(inline) > 内联样式(internal) > 外部链接(external)
通配符选择器跟继承来的样式,他们的权重以 0,0,0,0来计算
权重的级别根据选择器被划分为四个分类:行内样式,id,类与属性,以及元素。
权重决定了你css规则怎样被浏览器解析直到生效。"css权重关系到你的css规则是怎样显示的"。
每个选择器都有自己的权重。你的每条css规则,都包含一个权重级别。
权重记忆口诀。计算4种选择器个数:body #content .data img:hover
相同的权重:以后面出现的选择器为最后规则
id 选择器的权重比属性选择器高
与元素"挨得近"的规则生效
逻辑伪类的优先级都是
0
。例如::not()
,:is()
,:where()
等,整个选择器语句的优先级是由括号里面内容决定浏览器读取你的选择器,遵循的原则是从选择器的右边到左边读取。换句话说,浏览器读取选择器的顺序是由右到左进行
选择器有一个固有的效率,我们来看Steve Souders给排的一个顺序:
- id选择器(#myid)
- 类/伪类选择器(.myclassname)
- 标签选择器(div,h1,p)
- 相邻选择器(h1+p)
- 子选择器(ul > li)
- 后代选择器(li a)
- 通配符选择器(*)
- 属性选择器(a[rel="external"])
- 伪类/元素选择器
上面九种选择器的效率是从高到低排下来的,基中ID选择器的效率是最高,而伪类选择器的效率则是最底。详细的介绍大家还可以点击Writing efficient CSS selectors。