css--权重

前端页面开发流程

1、创建页面项目目录

2、使用Photoshop对效果图切图，切出网页制作中需要的小图片

3、将装饰类图像合并，制作成雪碧图

4、结合Photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面

 

CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 
10     <style type="text/css">
11     div{        /* div权重为1 */
12         color:red/*!important*/;   /* !important权重为10000 */
13     }
14 
15     .con{       /* class权重为10 */
16         color:gold;
17     }
18 
19     #box{
20         color:yellow;  /* id权重为100 */
21     }
22 
23 
24     body .px{        /* body+class权重为11 */
25         color:red;
26     }
27 
28     #body1 .px1{            /* id+class权重为110 */
29         color:greenyellow;
30     }
31     </style>
32 
33 </head>
34 <body id="body1" >
35 
36 <div id="box" class="con" style="color:pink">这是一个div元素</div>  <!--style权重为1000-->
37 
38 <div class="px px1">这是第二个div元素</div>
39 
40 </body>
41 </html>

 

posted on 2019-11-24 10:43  cherry_ning  阅读(113)  评论(0)    收藏  举报

导航