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> ```