子选择器中子元素的范围问题-慕课网

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

来源：8-6 捡了一个儿子 - 子选择器

网络爬虫_三少

2017-01-16 23:12

<!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样式为什么连香蕉苹果梨，白菜油菜卷心菜也跟着变更样式了呢？？照理来说他们应该不属于第一代子元素啊，求助，感谢！

写回答关注