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>