子选择器和包含选择器的区别和理解@慕课网原创_慕课网

子选择器：用于选择指定标签元素的第一代子元素
包含选择器：即加入空格,用于选择指定标签元素下的后辈元素
想要搞懂这个两选择器的区别就要先搞懂标签元素的辈份
如图

所以在使用子选择器的时候

<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;}
</style>
</head>
<body>

<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>

网页只会对<li>水果</li>和<li>蔬菜</li>有效

如果使用包含选择器

<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;   
}
</style>
</head>
<body>

<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>

网页就会对父辈以下的子辈开始的所有后辈<li>标签生效