包含(后代)選擇器

包含選擇器，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素。如右側(cè)代碼編輯器中的代碼：

.first span{color:red;}

這行代碼會使第一段文字內(nèi)容中的“膽小如鼠”字體顏色變?yōu)榧t色。

請注意這個選擇器與子選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。

總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。

繼續(xù)學(xué)習(xí)

新建文件

<!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;/*添加邊框樣式（粗細(xì)為1px，顏色為紅色的實線）*/ } </style> </head> <body> <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學(xué)校舉辦的活動我也沒勇氣參加。</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>

提交重置代碼

自動運行

章節(jié)

筆記

提問

課件

反饋

捐贈