优先级

在前端面试中，经常会遇到CSS选择器的问题三连： 说一下CSS的选择器有哪些 优先级是怎样的 权重计算方式 今天就来给大家介绍选择器的优先级和权重计算方式。 优先级是什么？有什么用？ 先提出一个问题：如果一个元素通过多种方式设置了字体大小，那么浏览器在最后渲染时会使用哪个属性值呢？ 其实，浏览器会通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。 换种说法，优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器 中的 每一种选择器类型的数值 决定。 总结一下： 权重决定了你css规则怎样被浏览器解析直到生效，css权重关系到你的css规则是怎样显示的。 当很多的样式被应用到某一个元素上时，权重决定哪种样式生效。 每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。 如果两个选择器同时作用到一个元素上，权重高者生效。 权重的计算规则 接着介绍权重的计算规则： 第一优先级：!important会覆盖页面内任何位置的元素样式 内联样式，如style="color: green"，权值为1000 ID选择器，如#app，权值为0100 类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010 标签、伪元素选择器，如div::first-line，权值为0001 通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000 继承的样式没有权值 权值计算公式： 权值 = 第一等级选择器 x 个数，第二等级选择器 x 个数，第三等级选择器 x 个数，第四等级选择器 x 个数 比如： 选择器 千位 百位 十位 个位 优先级 h1 0 0 0 1 0001 h1 + p::first-letter 0 0 0 3 0003 li > a[href*=“en-US”] > .inline-warning 0 0 2 2 0022 #identifier 0 1 0 0 0100 内联样式 1 0 0 0 1000 权重的比较规则 当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0 对应–> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。 ...