CSS选择器

 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>