CSS 中选择器的优先级以及 CSS 权重如何计算

251 阅读1分钟

!Important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性 优先级注意点:

  1. 权重是有 4 组数字组成,但是不会有进位。

  2. 可以理解为类选择器永远大于元素选择器, id 选择器永远大于类选择器,以此类推..

  3. 等级判断从左向右,如果某一位数值相同,则判断下一位数值。

  4. 可以简单记忆法: 通配符和继承权重为 0, 标签选择器为 1,类(伪类)选择器为 10, id 选择器 100, 行内样式表为 1000, !important 无穷大.

  5. 继承的权重是 0, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权 重都是 0。

权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。 - div ul li ------> 0,0,0,3 - .nav ul li ------> 0,0,1,2 - a:hover ------> 0,0,1,1 - .nav a ------> 0,0,1,1