1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <!--在标签style属性里写样式 写在head里-->
7 <style>
8 #i1l{
9 background-color: chartreuse;
10 height: 40px;
11 }
12 #i2l{
13 background-color: olivedrab;
14 height: 40px;
15 }
16 #i3l{
17 background-color: plum;
18 }
19 /*class选择器 .名称 属性里class等于这个.名称就可以用*/
20 .c1{
21 background-color: olivedrab;
22 }
23 /*标签选择器 可以span也可以div 意思是这个类型的标签都是这个样式*/
24 span{
25 background-color: darkred;
26 height: 40px;
27 }
28 /*层级选择器 span空格div 类似的 就是span下的div标签*/
29 span div{
30 background-color: ghostwhite;
31 height: 40px;
32 }
33 /*组合选择器 用逗号*/
34 .c1,.c2{
35 background-color: lightslategray;
36 height: 40px;
37 }
38 /*属性选择器 属性可以是自定义的 对选择到的标签再通过属性进行一次筛选*/
39 input[type='text']{
40 width: 50px;
41 height: 20px;}
42 </style>
43 </head>
44 <body>
45 <div >测试</div>
46 <div >测试2</div>
47 <div >测试3</div>
48 <div class="c1">测试4</div>
49 <span>测试5</span>
50 <span>
51 <div class="c2">测试层级</div>
52 </span>
53 <input type="text">
54 <input type="password">
55 </body>
56 </html>