css优先原则

   十二月 05, 2011       MGT@blogger

---

From Evernote:

css优先原则 Clipped from: http://raymondwang1314.iteye.com/blog/1287973

1. 优先原则一：文本从上到下，后出现的样式优先于前面出现的同一样式  
2.   
3. 例：  
4.   
5. <style type="text/css">  
6.   
7. .def1{background:black;}  
8.   
9. .def2{background:yellow; }  
10.   
11. </style>  
12.   
13. <div class=" def2 def1″>测试1</div>  
14.   
15. 结果：所有浏览器均yellow色，注意：与class="" 引号内的顺序无关，只看.def1和.def2在声明时的顺序，.def2后声明的所以权重高。  
16.   
17. 优先原则二：id声明（即 # 开头的样式）> class声明（即 . 开头的样式）> 标签声明(即 类似 div 开头)  
18.   
19. 以上三种声明处于不同的量级，份量上，div 开头相当于 1克 重，. 开头相当于 1公斤 重，# 开头相当于 1吨 重。  
20.   
21. 例：  
22.   
23. <style type="text/css">  
24.   
25. #bb{background:pink}  
26.   
27. .def{background:black;}  
28.   
29. div{background:yellow; }  
30.   
31. </style>  
32.   
33. <div id="bb" class="def">测试2</div>  
34.   
35. 结果：所有浏览器均pink色，注意：虽然按优先原则一，后出现的权重高，但那只是在同样重量级下的比较，优先原则二各重量级别就不同了。  
36.   
37. 优先原则三：数量取胜。如果同一个样式声明即一个大括号{}由多个 # . 或 div 组成，则权重按出现符号的量级增加  
38.   
39. 比如：#bb #tt #dd {background:red} 则重量等于3吨  
40.   
41. #bb .tt ul.dd li {background:red} 则重量等于1吨2公斤2克，这么精确的重量，就不需要举例了吧。  
42.   
43. 再次说明：优先原则一只适用两个样式声明同样重的情况  
44.   
45. 优先原则四：'!important'。相当于无限重量，在之前已经有说明，需要注意：ie下，在同一条样式声明即一个大括号中出现的!important 会被随后出现的同名样式冲洗掉。  
46.   
47. <style type="text/css">  
48.   
49. .def1{background:yellow !important;background:red;}  
50.   
51. .def2{background:green;}  
52.   
53. </style>  
54.   
55. <div class="def1 def2 ">dd</div>  
56.   
57. 结果：ie下，green色，background:yellow !important被后面的background:red冲洗了，而background:red与background:green的较量中，前者败在优先原则一之下。  
58.   
59. 优先原则五：近水楼台。<div style="background:black"></div>直接写在元素体内的style优先级别最高！（仅次于!important）用重量来形容，可以定为百万吨量级。  
60.   
61. <style type="text/css">  
62.   
63. .def1{ background:red;}  
64.   
65. </style>  
66.   
67. <div class="def1 " style="background:black">dd</div>  
68.   
69. 结果：black色。  
70.   
71. <style type="text/css">  
72.   
73. .def1{ background:red !important;}  
74.   
75. </style>  
76.   
77. <div class="def1 " style="background:black">dd</div>  
78.   
79. 结果：red色。  
80.   
81. <style type="text/css">  
82.   
83. .def1{ background:red !important;}  
84.   
85. </style>  
86.   
87. <div class="def1 " style="background:black !important">dd</div>  
88.   
89. 结果：black色。