1.如果权重值相同：
位置在后>位置在前；
遵循“内联>嵌入>外部”（应避免，若出现问题，溯源的时麻烦）
2.权重规则：（根据权重值排序，用 权重值第一 的样式）
权重分为四个等级（有一个重要级角色不在此列）
第一等：内联样式，权重1000，即标签内的style属性设置的样式
第二等：ID选择器，权重100，例如#id{...}
第三等：类选择器，伪类选择器，属性选择器，权重10，例如.class{...}、:hover{...}、[arrtibute=value]
第四等：标签选择器，伪元素选择器，权重1，例如div{...}、::after{...}
超然地位：!important（只要我出现，不好意思，权重就是无限，优先考虑，别的靠边站）
PS:还有几个权重为0，不计入排名，他们就是通配选择器(*)，子选择器(>)，相邻同胞选择器(+)
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#father #son{ //100 + 100 =200 胜出
color: blue;
}
#father p.c2{ //100 + 1 + 10=111
color: black;
}
div.c1 p.c2{ // 1+10+1+10=22
color: red;
}
#father{
color: green !important; //继承的 不OK
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
my color
</p>
</div>
</body>
</html>
