选择器优先级

最新推荐文章于 2020-09-01 10:12:47 发布

dixi7825

最新推荐文章于 2020-09-01 10:12:47 发布

阅读量330

点赞数

原文链接：http://www.cnblogs.com/soTired/p/10162156.html

版权

 1 <!doctype html>
 2 <html lang="en">
 3     <head> 
 4         <meta charset="UTF-8">
 5         <meta name="Generator" content="EditPlus">
 6         <meta name="Author" content="">
 7         <meta name="Keywords" content="">
 8         <meta name="Description" content="">
 9         <title>Document</title>
10         <style type="text/css">
11             .box1 div div{
12                 color:#000000 !important;
13                 font-size:50px;
14             }
15             .box1 div{
16                 color:red;
17                 font-size:30px;
18             } 
19             div{
20                 color:blue;
21                 font-size:20px;
22             }
23             .box1 div div{
24                 color:#ff00cc;
25                 font-size:50px;
26                 border:5px solid blue;
27             }
28         </style>
29     </head>
30     <body>
31       <!--
32         1:id > class > 标签 > 通配符 > 默认样式;
33         2: .box div div > .box div > div (作用范围越小,作用级别越大!)
34         3. 当选择器的类别与数量相同时（注意类别和数量一定是在相同的前提下这些才生效），执行顺序越靠后优先级越高，同一个选择器下的相同属性也遵循该规则
35         4. !important(一个important只能作用于一个属性） > 行内 > 其他选择器;  
36       -->
37       <div class="box1">
38           我是猪猪狭;
39           <div>
40             <div style="color:#66ff00; font-size:70px;">我是谁?我在哪儿?</div>
41         </div>
42       </div>
43     </body>
44 </html>