CSS 权重详解( 二 ) _CSS

文章插图

实例中，:not(#demo) 的权重值和 #demo 的权重值是相等的，所以后面声明的样式规则成功生效。
标签选择器、伪元素选择器

div {}div:before {}div:after {}除了上述的选择器之外，通配符选择器（*）和结合符（+、>、~）对优先级没有影响。
对于复杂的复合选择器，我们需要逐个等级比较权重大小，不允许跨越等级比较。为了方便计算，我们可以把权重值具象化，每出现一个选择器就在其对应的等级区间中权重值加 1，参考下面实例：
* {} /* 权重值 0-0-0-0-0 */div {} /* 权重值 0-0-0-0-1 */div h1+h2 {} /* 权重值 0-0-0-0-3 */div, ... div {} /* 权重值 0-0-0-0-n */#demo a:hover {} /* 权重值 0-0-1-1-1 */国外大神把 CSS 权重的计算模拟成海洋生物链，选择器组合权重越大则在生物链位置越高，非常浅显生动，建议收藏。

文章插图

图片转自 https://specifishity.com/
建议
在充分了解 CSS 选择器匹配原理和权重规则之后，在编写 CSS 代码时不妨多注意以下细节：

尽量不要使用 !important，尤其是在对外提供的插件和全站范围的样式表中，这会对模块代码中的样式覆盖带来非常大的麻烦。
!important 关键字的权重值为 1-0-0-0-0，只需要按照权重规则继续累加权重值即可覆盖该样式属性。

<html> <head> <style> div { color: red !important; } /* 通过 id选择器增加权重 */ #demo { color: blue !important; } </style> </head> <body> <div id="demo">测试</div> </body><html>减少不必要的选择器嵌套，嵌套最好不要超过三级。大量的复合选择器，会影响选择器匹配的效率，同时也会增加 CSS 样式文件的体积，不易维护。
当出现大量嵌套时，我们可以指定一个更具体的类选择器来替换复合选择器。
body div ul li span {}.li {}
【CSS 权重详解】