标签：元素 构建 first color gre 冲突 yellow 数学 over
在前端开发的时候，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都谈不上，最小特殊性）对选择器特殊性没有任何影响
举例：
假设以下的选择器指向同一个元素，并且出现了矛盾
1 h1{color:red;} /*0001*/ 2 p em{color:silver;} /*0002*/ 3 .grape{color:purple;} /*0010*/ 4 *.bright{color:blue;} /*0010*/ 5 p.bright{color:green;} /*0022*/ 6 #id{color:black;} /*0100*/ 7 div#id{color:yellow;} /*0111*/
很显然最后这个这个元素，是黄色（yellow），因为他的特殊性最大！
标签：元素 构建 first color gre 冲突 yellow 数学 over
原文地址：http://www.cnblogs.com/devilyouwei/p/6497250.html
