1 <!doctype 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 /* .box1 .txt1 .tnt1{ 12 background:red; 13 } */ 14 /* .box1 .tnt1{ 15 background:red; 16 } */ 17 .box1 .tnt1{ 18 font-size:36px; 19 } 20 .box1>span{ 21 background:red; 22 } 23 .box1,.txt1,.tnt1{ 24 border:1px solid red; 25 } 26 div.txt1{ 27 background:pink; 28 } 29 .box1 + span{ 30 font-size:30px; 31 } 32 </style> 33 </head> 34 <body> 35 <!-- 36 标签有不同结构,所以选择器同理; 37 并列(兄弟)关系 嵌套(父子)关系; 38 1.包含选择器: 选中后代,可以跨越多级.{.box span(选中所有span标签)}; 39 2.子集选择器: 选中儿子, 不能跨越多级; .box>span(选中佩奇爸爸); 40 3.群组选择器: 多个选择器选择到一组, 用逗号隔开; {(同时选择多个选择器名用逗号隔开)作用是同时对多个标签起作用}; 41 4.复合选择器: 需要标签同时满足两个选择器的条件才能满足;{(div.txt1)选中我是佩奇妈妈}; 42 5.毗邻选择器: 选择某个元素紧挨着的下一个兄弟元素; {(.box1+span)选中我是佩奇爷爷}; 43 --> 44 <div class="box1"> 45 <p class="txt1"> 46 我是佩奇妈妈; 47 <span class="tnt1">小猪佩奇一号</span> 48 <span>小猪佩奇二号</span> 49 <span>小猪佩奇三号</span> 50 <span>小猪佩奇四号</span> 51 </p> 52 <span>佩奇爸爸来了!</span> 53 </div> 54 <span>佩奇爷爷来了!</span> </br> 55 <div class="txt1">我是佩奇妈妈！</p> 56 </body> 57 </html>