一：后代选择器
1.描述
使用空格隔开
2.案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div p{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <!-- 后代选择器--> 14 <!-- 把所有的网选出来 --> 15 <div>hvjj</div> 16 <div>hvjj</div> 17 <div>hvjj</div> 18 <div> 19 <p>网</p> 20 </div> 21 <div> 22 <p>网</p> 23 </div> 24 <p>66</p> 25 <p>77</p> 26 </body> 27 </html>
3.效果
二：子代选择器
1.只对子代其作用
使用>
2.案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ul li > a{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <ul> 14 <li> 15 <a href="#">一级菜单</a> 16 </li> 17 <div> 18 <a href="#">二级菜单</a> 19 <a href="#">二级菜单</a> 20 <a href="#">二级菜单</a> 21 </div> 22 </ul> 23 </body> 24 </html>
3.效果
原文：https://www.cnblogs.com/juncaoit/p/10841846.html