一、包含选择器
用于指定目标选择器必须处于某个选择器对应的元素内部
Selector1 Selector2(...)/* 其中Selector1、Selector2都是有效选择器 */例如
<head>
<style>
div .a{
width:300px;
height:200px;
border:2px dotted black;
background-color:red;
}
</style>
</head>
<body>
<div><section><div class="a">处于div之内且class属性为a的元素</div></section></div>
</body>
如上代码 可以看得出来div内的名为a的class块被赋予相应的属性和值，已经作用在它上面，务必记得div .a中间存在一个空格。
二、子选择器
用于指定目标选择器必须是某个选择器对应的元素的子元素。
Selector1>Selector2{....}/* 其中Selector1、Selector2都是有效选择器 */<head>
<style>
div>.a{
width:300px;
height:200px;
border:2px dotted black;
background-color:red;
}
</style>
</head>
<body>
<div><p class="a">class属性为a且是div的子节点的元素</div></p></div>
</body>
由此可见，子选择器是带着div>(其中的>代表div内的元素)而包含选择器里面是div .a，那么他们可以相互转换吗？ 首先我们可以看到的是子选择器中包含的是p所带的class，而div是div 内部包含的class ，它们之间的转换会增加css的步骤和代码冗余 ，能省就省。