2021-01-23 css权重

- CSS的语法!important很容易被误用。来自CSS 联合设计师Steven Pemberton认为：
    添加 !important 仅出于一个原因：法律要求某些文本采用指定的字体大小。

-------------------------------------------------------------
转自：https://zhuanlan.zhihu.com/p/341120461

对于一个选择器的权重，将会按下面这样的规则进行计算：

    如果声明来自一个行内样式（ style 属性）而不是一条选择器样式规则，算 1 ，否则就是 0 （ =a ）。HTML中，一个元素的 style 属性值是样式规则，这些属性没有选择器，所以 a=1 , b = 0 , c = 0 , d = 0 ，即 1, 0, 0, 0
    计算选择器中 ID 属性的数量 ( = b )
    计算选择器中其它属性和伪类的数量 ( = c )
    计算选择器中元素名和伪元素的数量 ( = d )

4个数连起来 a-b-c-d （在一个基数很大的数字系统中）表示特殊性，比如下面这样的示例：

*             {}  /* a=0 b=0 c=0 d=0 -> 选择器权重 = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> 选择器权重 = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> 选择器权重 = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> 选择器权重 = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> 选择器权重 = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> 选择器权重 = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> 选择器权重 = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> 选择器权重 = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> 选择器权重 = 0,1,0,0 */
style=""          /* a=1 b=0 c=0 d=0 -> 选择器权重 = 1,0,0,0 */