CSS选择器之子元素选择器

    大家可能会混淆 子元素选择器和包含选择器。其实很简单，子元素选择器只针对目标对象的子元素，即第一层亲子关系。包含选择器则针对目标元素的子元素和子元素的子元素。下面看代码:

<style type="text/css">
    div em{ color:read;}
    span>em{color:read;}
</style>
<!--包含选择器-->
<div>
   <em>1</em>
    <p><em>2</em></p>
</div>

<!--子元素选择器-->
<span>
   <em>3</em>
    <p><em>4</em></p>
</span>

其结果是1，2，3变为红色，4不会发生变化。