8-7包含(后代)选择器（空格） · 初识HTML+CSS

**包含选择器**，即加入空格,用于选择指定标签元素下的**后辈元素。**如右侧代码编辑器中的代码： ~~~ .first span{color:red;} ~~~ 这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“\>”进行选择。总结：**\>**作用于元素的第一代后代，**空格**作用于元素的所有后代。 ### 任务我来试一试：修改一下代码 1、把右边代码编辑器中第`9`行代码修改一下：把`.food>li`修改为`.food li`看一下效果。想一想为什么会是这样的效果？ ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>后代选择器</title> <style type="text/css"> .first span{color:red;} .food li{ border:1px solid red;/*添加边框样式（粗细为1px，颜色为红色的实线）*/ } </style> </head> <body> <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>  <ul class="food"> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>梨</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>卷心菜</li> </ul> </li> </ul> </body> </html> ```