1 <!doctyape 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 *{margin:0; padding:0;} /*必须放在前面,放在后面不起作用;*/ 12 /*#box1{ 13 background:#330033; 14 } */ 15 .bat{ /*同一标签里有两个class, 看谁在前边,谁起作用!*/ 16 background: #ff6666; 17 } 18 .box{ 19 background:skyblue; 20 } 21 22 div{ 23 width:200px; 24 height:200px; 25 background:blue; 26 } 27 bat{ 28 } 29 a{ 30 text-decoration:none; /*去掉下划线*/ 31 } 32 .pat{ 33 } 34 .na{ 35 } 36 #txt1{ 37 color:red; 38 } 39 #txt2{ 40 color:skyblue; 41 font-size:20px; /*文字大小*/ 42 } 43 </style> 44 </head> 45 <body> 46 <!-- 47 选择器: 48 标签关键字: * 49 通配符选择器: 50 类选择器: class 51 特征: 52 在一个页面中可以出现多次; 53 在一个元素中可以出现多个类名,类名之间用空格隔开; 54 id选择器:id 55 特征: 56 在一个页面中相同的id只能出现一次; 57 一个元素中,只能有一个id; 58 59 作用范围: *> 关键字 > class >id 60 作用范围越大, 优先级越低; 优先级: id > class > 关键字 > *; 61 --> 62 <div class="box bat" id="box1"></div> 63 <a href="#a" class="pat na">你是小猪Pig</a> 64 <a href="#a" class="pat nb">你是小猪Pig</a> 65 <a href="#a" class="pat nc">你是小猪Pig</a> 66 <a href="#a" class="pat">你是小猪Pig</a> 67 <a href="#a" class="pat">你是小猪Pig</a> 68 <a href="#a" class="pat">你是小猪Pig</a> 69 <a href="#a" class="child na hd">你是小猪Pig</a> 70 <p id="txt1">懵逼树下懵逼坐，你我都有懵逼果！</p> 71 <p id="txt2">懵逼树下懵逼坐，你我都有懵逼果！</p> 72 </body> 73 </html>