第十八节 css3动画之css权重

 1 <!-- css权重：
 2         css权重指的是样式的优先级，有两条或者多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面的样式
 3 
 4      权重的等级：可以把样式的应用方式分为几个等级，按照等级来计算权重
 5          1、!important，加在样式属性后，权重值为10000
 6          2、内联样式，如：style=''，权重值为1000
 7          3、ID选择器，如：#content，权重值为100
 8          4、类，伪类和属性选择器，如content、hover权重值为10
 9          5、标签选择器和伪元素选择器，如：div、p、before权重值为1
10          6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)权重值为0 -->
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14     <meta charset="UTF-8">
15     <title>Document</title>
16     <style type="text/css">
17         .box{
18             color: red;  /* 权重小于内联的style，显示蓝色，可以在后面加一个!important提高其权重 */
19             color: red!important;
20         }
21 
22 /*        body #content .main_content h2{
23             color: red; /* 可以通过在最前面添加一个body标签增加权重让其显示红色 */
24         }*/
25 
26         #content div.main_content h2{
27             color: red; /* 或者通过在main前面加一个div增大其权重，让其显示红色 */
28         }
29 
30         #content .main_content h2{
31             color: blue;
32         }
33     </style>
34 </head>
35 <body>
36     <div class="box" style="color: blue">这是一个div元素</div>
37 
38     <div id="content">
39         <div class="main_content">
40             <h2>这是一个好h2标题</h2>
41         </div>
42     </div>
43 </body>
44 </html>