权重计算公式
将选择器按：id选择器,类选择器,标签选择器进行个数统计，根据统计结果进行排序
</p> <title></title><style type="text/css"> /* 1，0，1 */ #box1 p { color: red; } /* 0，3，2 */ .div1 div.div2 .div3 p { color: blue; } /* 1, 1, 2 */ div.div1 #box2 p { color: green; } /* 0, 2, 1 */ .div1 .div2 p { color: pink; } </style><div id="box1" class="div1"> <div id="box2" class="div2"> <div id="box3" class="div3"> <p>这么多css属性，我究竟该听谁的？会是什么颜色呢？</p> </div> </div> </div>由统计的结果可知，1,1,2的权重最大，因而p标签的颜色应为green
image
高维打低维
看过《三体》的同学都知道，高维空间对于低维空间可以随意打，在四维空间，可以轻易地摧毁在三维空间无坚不摧的水滴。相似的，在css中，再多的标签选择器，也敌不过一个类选择器
image
继承而来的权重为0
继承父辈的财产，假如不好好利用，而是坐吃山空，那远不如自力更生者。css继承的样式，权重是0。即：随意一个标签选择器就能覆盖继承的样式
image
权重相同怎样办
假如选择器的权重相同，以style中后出现的选择器为准
image
<title></title><style type="text/css"> /* 1,1,1 */ #box1 .div2 p{ color:red; } /* 1,1,1 */ .div1 #box3 p{ color:blue; } </style><div id="box1" class="div1"> <div id="box2" class="div2"> <div id="box3" class="div3"> <p>权重相同的情况下，以style中后出现的选择器为准</p> </div> </div> </div>
image
超出五行外的!important
有时候，我们需要给某个css样式赋予特殊的权重，尤其是接手一个css写得乱七八糟的项目，又没充足的时间去梳理样式代码，此时即可以在分号前加上!important，此关键字将超越所有权重，但不能滥用。
注意事项：
!important不影响继承性，该是0还是0。一个标签是通过继承性影响的，权重是0，加上!important也是0，也不能与已经选中了的选择器抗衡!important不影响就近准则，远的那个，写上!important也没用，还是以近的那个为准
