example .pp{
color: orange
}
.
example.pp2 {
color: green
}
如上面的两个定义一个是中间有空格，一个是中间没空格。
第一个class要这样写生效：<p class="example">文字文字<span class="pp">pp这个class生效</span>....</p>
第二个class要这样写生效：<p class="example pp2">pp2这个class生效</p>
.example .pp = E F 是后代选择器。
.example.pp2 则是在一个元素上，这个元素包括这两个类才会有效果。
.example .pp中间用空格隔开，表示后代选择器，选择的是.example内的.pp。
点 是类选择器的标识。如 .aClass{ width:50px}空格 是后代选择器的标识。如 div p{ width:100px}
类选择器，设置的是同个类名(如name=“aClass”)的元素的样式；
后代选择器，设置的是一个元素的某种后代的样式。如上面的div p{ width:100px}就是设置 所有div元素中的所有后代中的所有p元素。
【div元素中的所有后代 包括div的子元素、孙元素、曾孙元素等等】
你可以这样理解：
类选择器 指所有外号相同的人(他们的外号都叫做aClass）；
后代选择器 指同时满足两个条件的人，如：小树 叶子 {balabala} 前提是小树，然后是它的所有叶子。
比如下面这段代码:
<div class="aa bb"><p class="bb">
<span class="bb"></span>
</p>
</div>
选择器：.aa .bb
.aa和.bb间加上空格，是子选择器，选择.aa下含有.bb的子节点，子包括儿子节点、孙子节点，选择出的内容包括p.bb，span.bb
选择器: .aa.bb
.aa和.bb间无空格，是选择同一个元素，只不过选择器粒度更精细了些，选择的元素既有.aa类，也有.bb类，选择出的内容为：div.bb
选择器:.aa>.bb
.aa和.bb间加上大于号，也是子选择器，选择.aa下含有.bb的子节点，子只包括儿子节点，选择出的内容为p.bb
