CSS的模式、优先级计算和最佳实践

tomjamescn

    CSS的模式如下：

        Selector {RuleSet}

    其中，RuleSet，即规则集的模式如下：

        Property:Value

优先级计算

    当对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页面中的样式表

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

最佳实践
    在使用CSS时，最小化要引入的样式表，不要用@import,@important。在每个样式表中，按照优先级顺序进行排序。排序时，可以按照下面的顺序（优先级从小到大）：

1. /* Universal Selectors */
   
2. /* Element Selectors */
   
3. /* Class, Attribute, and Pseudo Selectors */
   
4. /* ID Selectors */
   
5. /* !important Universal Selectors */
   
6. /* !important Element Selectors */
   
7. /* !important Class, Attribute, and Pseudo Selectors */
   
8. /* !important ID Selectors */

    由于每个浏览器默认的样式表不太一样，所以为了达到更标准统一的效果，可以引入标准基础样式表，对html的元素进行设定。比如：

1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0; padding:0; }
   
2. table { border-collapse:collapse; border-spacing:0; }
   
3. fieldset,img { border:0; }
   
4. address,caption,cite,code,dfn,em,strong,th,var
   
5. { font-style:normal; font-weight:normal; }
   
6. ol,ul { margin:1em 0; margin-left:40px; padding-left:0; }
   
7. ul { list-style-type:disc; }
   
8. ol { list-style-type:decimal; }
   
9. caption,th { text-align:left; }
   
10. h1,h2,h3,h4,h5,h6 { font-size:100%; }
    
11. /* BLOCK ELEMENTS */
    
12. html, div, map, dt, form { display:block; }
    
13. body { display:block; margin:8px; font-family:serif; font-size:medium; }
    
14. p, dl { display:block; margin-top:1em; margin-bottom:1em; }
    
15. dd { display:block; margin-left:40px; }
    
16. address { display:block; font-style:italic; }
    
17. blockquote { display:block; margin:1em 40px; }
    
18. h1 { display:block; font-size:2em; font-weight:bold; margin:0.67em 0; }
    
19. h2 { display:block; font-size:1.5em; font-weight:bold; margin:0.83em 0; }
    
20. h3 { display:block; font-size:1.125em; font-weight:bold; margin:1em 0; }
    
21. h4 { display:block; font-size:1em; font-weight:bold; margin:1.33em 0; }
    
22. h5 { display:block; font-size:0.75em; font-weight:bold; margin:1.67em 0; }
    
23. h6 { display:block; font-size:0.5625em; font-weight:bold; margin:2.33em 0; }
    
24. pre{ display:block; font-family:monospace; white-space:pre; margin:1em 0; }
    
25. hr { display:block; height:2px; border:1px; margin:0.5em auto 0.5em auto; }
    
26. /* TABLE ELEMENTS */
    
27. table { border-spacing:2px; border-collapse:separate;
    
28. margin-top:0; margin-bottom:0; text-indent:0; }
    
29. caption { text-align:center; }
    
30. td { padding:1px; }
    
31. th { font-weight:bold; padding:1px; }
    
32. tbody, thead, tfoot { vertical-align:middle; }
    
33. /* INLINE ELEMENTS */
    
34. strong { font-weight:bold; }
    
35. cite, em, var, dfn { font-style:italic; }
    
36. code, kbd, samp { font-family:monospace; }
    
37. ins { text-decoration:underline; }
    
38. del { text-decoration:line-through; }
    
39. sub { vertical-align:-0.25em; font-size:smaller; line-height:normal; }
    
40. sup { vertical-align: 0.5em; font-size:smaller; line-height:normal; }
    
41. abbr[title], acronym[title] { border-bottom:dotted 1px; }
    
42. /* LIST ELEMENTS */
    
43. ul { list-style-type:disc; margin:1em 0; margin-left:40px; padding-left:0;}
    
44. ol { list-style-type:decimal; margin:1em 0; margin-left:40px; padding-left:0;}
    
45. /* remove top & bottom margins for nested lists */
    
46. ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl
    
47. { margin-top:0; margin-bottom:0; }
    
48. /* use circle when ul nested 2 deep */
    
49. ol ul, ul ul { list-style-type:circle; }
    
50. /* use square when ul nested 3 deep */
    
51. ol ol ul, ol ul ul, ul ol ul, ul ul ul { list-style-type:square; }