以下是引用片段：
<style type="text/css">
td .b {
color:#00ff00
}
th.b {
color:#ff0000
font-family:黑体
font-size:20px
}
.b {
color:#0000ff
font-size:12px
}
</style>
<table>
<tr>
<td><div class="b">第一个类b的类路径是th .b</div></td>
<th class="b">第二个类b的类路径是th.b</td>
<td class="b">第三个类b的类路径是 .b</th>
</tr>
</table>
<div class="b">第三个类b的类路径是 .b</div>
点 是类选择器的标识。如 .aClass{ width:50px}空格 是后代选择器的标识。如 div p{ width:100px}
类选择器，设置的是同个类名(如name=“aClass”)的元素的样式；
后代选择器，设置的是一个元素的某种后代的样式。如上面的div p{ width:100px}就是设置 所有div元素中的所有后代中的所有p元素。
【div元素中的所有后代 包括div的子元素、孙元素、曾孙元素等等】
你可以这样理解：
类选择器 指所有外号相同的人(他们的外号都叫做aClass）；
后代选择器 指同时满足两个条件的人，如：小树 叶子 {balabala} 前提是小树，然后是它的所有叶子。
css中 用逗号隔开表示两个不同类的样式类名用同一个样式；
空格隔开表示从属包含关系，是当前的元素子元素；
逗号隔开表示并列关系，两者之间没有任何关系，可以使用同一个样式。
比如下面的代码示例：
<div class="content"><span class="content-child">子内容</span>
内容</div>
<div class="conter">内容2</div>
<style>
.content .content-child{
color:red//空格隔开表示在类content下的类样式.content-child的样式被改变了
}
.content,conter{
color:#ffd014//逗号表示在不同的类下，样式都被改变。
}
</style>
