码迷,mamicode.com
首页 > 其他好文 > 详细

选择器优先级

时间:2018-12-22 20:43:39      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:meta   round   样式   text   --   edit   esc   规则   选择   

 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>

 

选择器优先级

标签:meta   round   样式   text   --   edit   esc   规则   选择   

原文地址:https://www.cnblogs.com/soTired/p/10162156.html

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