8-6子選擇器（大于號） · 初識HTML+CSS

還有一個比較有用的選擇器**子選擇器**，即大于符號(>),用于選擇指定標簽元素的**第一代子元素。**如右側代碼編輯器中的代碼： ~~~ .food>li{border:1px solid red;} ~~~ 這行代碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框。 ### 任務我也來試試，把文字內容的“我還是一個膽小如鼠的小女孩”這一句話加入紅色邊框。效果圖如下： [![](http://img.mukewang.com/54003a0100012cc906650087.jpg)](http://img.mukewang.com/54003a0100012cc906650087.jpg) 1、在右側代碼編輯器的第8行輸入代碼： ~~~ .first>span{border:1px solid red;} ~~~ ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>子選擇符</title> <style type="text/css"> .food>li{border:1px solid red;}/*添加邊框樣式（粗細為1px，顏色為紅色的實線）*/ .first>span{border:1px solid red;} </style> </head> <body> <p class="first">三年級時，<span>我還是一個<span>膽小如鼠</span>的小女孩</span>，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p> <h1>食物</h1> <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> ```