码迷,mamicode.com
首页 > Web开发 > 详细

第十八节 css3动画之css权重

时间:2020-03-14 16:23:44      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:bsp   before   提高   html   一个   span   div   覆盖   红色   

 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>

 

第十八节 css3动画之css权重

标签:bsp   before   提高   html   一个   span   div   覆盖   红色   

原文地址:https://www.cnblogs.com/kogmaw/p/12492536.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!