[原创]通过IE8的测试来看CSS选择符的样式渲染优先级

以下内容为个人测试结果，仅供参考

1、选择符样式的优先级为：

内联样式 > 多级选择符样式 > ID选择符样式 > CLASS选择符样式 > TAG选择符样式

比如标签内定义的 style="color:red" 是内联样式，是优先级最高的，而类似 div {color:blue} 这样的单纯tagname的选择符是优先级最低的。

2、多层的选择符会根据单层选择符的优先级逐级加载并保留优先权最高的样式，级别越多权限越高，同级别内按照单层选择符优先级决定保留样式。

多级选择符定义优先级高于单层选择符定义，比如 DIV #mydiv {...} 这个定义会覆盖 #mydiv {...} 定义内的同名属性值。

3、选择符样式的载入顺序是按文本流自上而下加载，不同选择符的样式优先级跟定义的位置先后没有关系，比如应用于同一标签的ID和CLASS选择符，无论先定义谁，都是ID选择符优先级高。

而同名选择符的样式总是后加载的相同样式属性优先级高，会覆盖当前已有的属性定义;可以认为同名选择符的样式会被浏览器按照加载顺序合并不同样式属性定义、覆盖相同样式属性定义，最终形成一个唯一的整体CLASS定义。

4、多个CLASS选择符应用于同一个标签时，各CLASS的优先级跟应用次序无关，只与它们定义时的位置次序有关。个人猜想，IE很可能是把所有应用到的CLASS全部枚举出来，然后按照这些CLASS的定义次序进行合并，跟这些CLASS被引用时的次序无关。看来IE对多个不同名CLASS样式的合并仍然遵循其对同名CLASS定义合并的原则，文本流顺序内后定义的优先级高。

比如 <div class="c2 c0 c1"> 不论c0,c1,c2被引用时是什么次序，合并顺序仍然按照他们在样式表里的定义顺序来合并。不知道其它浏览器是不是也遵循这个原则？以前总是想当然的认为多个CLASS应用于同一标签时，是按照引用次序来渲染样式的，经过测试才知道，还是按照被引用CLASS的定义次序来渲染的。

 

总结：样式渲染的优先级取决于选择符的个性化程度，私有程度越高优先级越高。