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>