                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

子选择器中子元素的范围问题

<!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， 颜色为红色的实线）*/
.fooder>li{color:red;}
    /*测试第一代子元素的范围*/
</style>
</head>
<body>
<h1>食物</h1>
<ul class="fooder">
    <li>水果
        <ul>
        	<li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
    	<ul>
        	<li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>
</body>
</html>

我为了测试子选择器中所说的子元素的范围，建了这么个HTML，测试的时候.food样式只应用在水果和蔬菜两个子元素上了，但是.fooder样式为什么连香蕉苹果梨，白菜油菜卷心菜也跟着变更样式了呢？？照理来说他们应该不属于第一代子元素啊，求助，感谢！