1 <!DOCTYPE html> 2 <html lang="en"> 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 id="i1l" >测试</div> 46 <div id="i2l" >测试2</div> 47 <div id="i3l" >测试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>