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 ????????????????类选择器: class51 ????????????????????特征:52 ????????????????????????在一个页面中可以出现多次;53 ????????????????????????在一个元素中可以出现多个类名,类名之间用空格隔开;54 ????????????????id选择器:id55 ????????????????????特征: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>CSS选择器
原文地址：https://www.cnblogs.com/soTired/p/10140020.html