1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 color: red; 9 } 10 11 .box span{ 12 color: black; 13 } 14 15 .box em{ 16 color: pink; 17 } 18 19 .box .span01{ 20 color: blue; 21 } 22 /*多层嵌套，最好不要超过四层，会拖性能*/ 23 </style> 24 </head> 25 <body> 26 <div class="box"> 27 层级选择器：主要应用在选择父元素下的<span>子元素</span>，或者子元素下面的<em>子元素</em>，可以和标签元素结合使用，减少命名 28 同时也可以通过层级，防止<span class="span01">命名冲突</span> 29 </div> 30 </body> 31 </html>