o<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">
h1{color:red;}
.first,#second span{color:green;}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>
因为第一段为类选择器，全部被<p class="first">第一段文字</p>包含
第二段被id选择器标记 且只有简单二字才被id选择器标记
首先明白两点：
.first,#second span{color:green;}
1.此句话首先是一个分组选择符，我们的目的是为多个标签元素设置同一个样式。
分别为这两个标签元素设置同一个样式：.first元素 和#second中的span元素。
2. 该例的分组选择器由类选择器和后代选择器组成。
.first{ color : green ;}---------普通的类选择器
#second span { color : green }------后代选择器，为span的所有后代元素指定样式。
ps: 所有选择器（子选择器、后代选择器等）都是在类选择器和ID选择器的基础上衍生而来的。
ID就是指定的某个标签里的元素，而class是全部
因为第二段是ID指定的<span>所以只有“简单”两个字
#second span{color:green;} 这里的color更接近与span 所以那个更接近就显示哪个，遵循就近原则。我是这么理解的，不知道对不对。。。。
因为定义的内容不同, 第一段定义的first 是表示全段的，你看它在p标签里面，而second span只包含了简单二字
因为在第一段代码里，first标签生效，所以全绿。
而在第二段代码里，只有span标签生效，而second未生效。
要想第二段全绿，.first,#second span{color:green;}，这行代码seond后要加个 ， 逗号 懂了吗
因为第一段为类选择器.first改变的颜色，而第二段是只有 id=second 下面的span 标签才改变的颜色。
自己好好看看8-5的内容，上面详细写了类和ID选择器的区别，第一段用的是类选择器，不规定次数，所以整一段都可以变绿色，第二段是ID选择器，只能使用一次。加在“简单”上所以只有简单变绿，你把<span>加在整段上就能全部变成绿色啦。
#second span 选择器的意思是说id为second 的所有span子元素，当然只有简单两个字变为绿色了。