还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
.food>li{border:1px solid red}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
[html] view plain copy
<style type="text/css">
.food>li{border:1px solid red}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
</style>
[html] view plain copy
<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>
包含(后代)选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red}
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
举例：
.food li{
border:1px solid red/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
[html] view plain copy
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
现在我们有一个下拉列表，Html代码如下：[html]viewplaincopyAppleBananaOrangePearl这个是时候我们想拿到选中的水果的名字，比如Apple，下面的代码不行：[javascript]viewplaincopyvarfruit_select=document.getElementById("fruit_type")varfruit_name=fruit_select.value这个时候只能拿到水果的id，比如f1这时需要先得到选中的菜单项的index，再取文字[javascript]viewplaincopyvarfruit_select=document.getElementById("fruit_type")varfruit_index=fruit_type_select.selectedIndex[javascript]viewplaincopy//这行会返回f1varfruit_id=fruit_type_select.options[fruit_type_index].value[javascript]viewplaincopy//这行才能返回我们想要的Applevarfruit_name=fruit_type_select.options[fruit_type_index].text
