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给排的一个顺序:
  1. id选择器(#myid)
  2. 类/伪类选择器(.myclassname)
  3. 标签选择器(div,h1,p)
  4. 相邻选择器(h1+p)
  5. 子选择器(ul > li)
  6. 后代选择器(li a)
  7. 通配符选择器(*)
  8. 属性选择器(a[rel="external"])
  9. 伪类/元素选择器
上面九种选择器的效率是从高到低排下来的,基中ID选择器的效率是最高,而伪类选择器的效率则是最底。详细的介绍大家还可以点击Writing efficient CSS selectors