CSS优先级计算

优先级计算

    当对HTML中的同一个元素有多个选择器时，就涉及到了规则的优先级问题，规则的优先级是根据对应的选择器的优先级来的，选择器有6中优先级，从小到大排列：

1. 通用选择器（universal selector），用通配符表示，如 * {boder:0px solid black}
2. 元素选择器（element selector），如 div {boder:0px solid black}
3. 类、属性或者伪类选择器，如 .c10 {boder:0px solid black}，:hover {...}
   
4. ID选择器，如#i100 {boder:0px solid black}
5. HTML元素的style属性
6. 加了!important的规则，如 #i100{border:6px solid black !important;}

    还有一种情况，当冲突的规则都具有多个选择器时，按照越大的优先级越多那么优先级就越大的规则来解决冲突。如#i100 *.c20 *.c10{} 和#i100 *.c10 div p span {}中的规则冲突时，按照前述的规则，应该是前者的规则优先级更大，因为两者都有一个ID选择器,但前者有两个类选择器，后者只有一个类选择器。
    当前面所属的规则还是不能解决冲突时，即规则所在的选择器属于“一类”。那么就按照规则所处的位置来决定谁的优先级更高，下面的位置是按照优先级从低到高来排序的：

1. 浏览器提供的默认样式表。
2. 用户自己加的样式表（PS：什么意思）
3. <link>元素中引入的样式表
4. <style>元素中以@import引入的样式表
5. <style>元素中的样式表，即写在html页面中的样式表

    如果这样还是不能决定优先级，即冲突的规则来自于同一个位置，那么，处于后面的规则覆盖前面的规则。