在前端开发的时候，css构建样式规则，这个时候我们会遇到一个问题：当我们对同一个元素做多个样式规则，其中发生了冲突的时候，css是如何选择最终呈现的样式
如下：
div{
color:red;
}
div.main{
color:blue;
}
div#main2{
color:green
}
<body>
<div class="main" id="main2">
ssss
</div>
</body>
最终这个“sss”会是什么颜色呢？这就却决于css选择器的特殊性：
特殊性的描述可分为四个部分：如：0，0，0，0
什么意思呢？这四个数字，是有优先级的，这就类似于nvidia的显卡
我们先做如下定义：
四个数字，按位比较，从左到右优先级依次降低，每一位数字越大，特殊性越大，特殊性越大，有冲突的选择器规则将被使用到最终效果
用于比较时候：
从左往右比较两个选择器的特殊性，比较按同位比，如果当前位上，选择器1大于选择器2，选择器1特殊性大；如果当前位上，选择器1小于选择器2，选择器2特殊性大；如果相等，跳过当前位，比较下一位，方法与当前位同理
举例：（由大到小的特殊性）
1，0，0，0>
0，2，0，0>
0，1，2，0>
0，0，3，0>
0，0，1，0>
0，0，0，1>0，0，0，0
请先理解上面的例子，后面我们使用这种方式描述特殊性
我们看到特殊性描述一共有4位数，就像数学里的千，百，十，个一样
第一位：内联样式
第二位：ID选择器（#main）
第三位：类选择器，属性选择器或伪类（.main 或 input[name=main] 或 a:hover li:first-child）
第四位：元素或伪元素(p,div,input等常用的元素，伪元素比如p:first-letter p:first-line)
通配符*(0,0,0,0)
空格什么都不算（0,0,0,0都谈不上，最小特殊性）对选择器特殊性没有任何影响
举例：
假设以下的选择器指向同一个元素，并且出现了矛盾
h1{color:red;} /**/
p em{color:silver;} /**/
.grape{color:purple;} /**/
*.bright{color:blue;} /**/
p.bright{color:green;} /**/
#id{color:black;} /**/
div#id{color:yellow;} /**/
很显然最后这个这个元素，是黄色（yellow），因为他的特殊性最大！
下一个，重要性！important，重要规则总会胜出
有时候某个声明可能非常重要，超过了所有其他声明，css2.1开始允许在声明“；”符号前使用important
p.light{
color:yellow !important;
font-size:200px !important;
}
必须在分号之前声明最后插入，哪一个规则需要强调，就加上这个!important
标志为!important的声明并没有特殊的特殊性值，不过要与非重要声明分开来考虑
如果一个重要声明和非重要声明起了冲突，重要的必定会胜利