最近在搞跨平台开发，用到了CSS，其实只要涉及到Web的都会用到！
一开始看的头大，不知道，选择器啥意思，
后来知道了，又不知道，为啥选择器许多个能并列，
后来又知道了，又又不知道了，为啥中间一个空格，影响这么大！
终于大概知道的全了，
为怕忘记，特记录如下。
HTML文档是一棵树的结构，各元素以一种层次结构为基础构成‘树’的视图。
文档树中的每个元素，要么是另一个元素的父元素，要么是另一个元素的子元素，这样，各元素之间就形成了‘父子关系’。
基于这样的关系模型，CSS定义了后代选择器（descendant selector）也称为上下文选择器（contextual selector）。
选择器，的写法为：.名字{......}
/* 所有class属性值为blue的div元素显示为红色字体 */
div.red {color:red;}后代选择器，的写法为：子代元素以空格与父元素形成连接关系构成选择器
/* 作为div元素后代的任何span元素显示为蓝色字体 */
div span{color:blue;}
/* 作为div元素后代的任何class属性值为blue的元素显示为蓝色字体 */
div .Yellow{color:Yellow;}
/* 所有class属性值为contain的div元素，其后代中class属性值为blue的任何元素显示为蓝色字体*/
div.aaa .bbb{color:green;}多类选择器，的写法为：选择器之间不能有空格。
/* 多类选择器*/
div.aaa.bbb{color:purple;}
综上，选择器之间的空格是一种结合符，如果要构成后代选择器，则空格两边的选择符必须为如下两种形式：
元素选择符 空格 元素选择符
非元素选择符 空格 非元素选择符
后代选择器中绝对不可能出现的一种情形：元素选择符 [空格] 非元素选择符。
最重要一点：两个类选择器之间存在空格则构成后代选择器，之间没有空格的则构成多类选择器。
下面上真货
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*--------------------------------------------- 1*/
/* 作为div元素后代的任何span元素显示为蓝色字体 */
div span{color:blue;}
/*--------------------------------------------- 2*/
/* 所有class属性值为blue的div元素显示为红色字体 */
div.red {color:red;}
/*--------------------------------------------- 3*/
/* 作为div元素后代的任何class属性值为blue的元素显示为蓝色字体 */
div .Yellow{color:Yellow;}
/*--------------------------------------------- 4*/
/* 所有class属性值为contain的div元素，其后代中class属性值为blue的任何元素显示为蓝色字体*/
div.aaa .bbb{color:green;}
/*--------------------------------------------- 5*/
/* 多类选择器*/
div.aaa.bbb{color:purple;}
</style>
</head>
<body>
<b><h2>
--------------------------------------------- 1
<div>
this is span 1 <br>
<span>this is span 2</span> <br>
this is span 3
</div>
--------------------------------------------- 2
<div class="red">
this is span 1 <br>
<sss>this is span 2</sss> <br>
</div>
--------------------------------------------- 3
<div>
this is span 1 <br>
<sss>this is span 2</sss> <br>
<sss class="Yellow">this is span 3</sss>
</div>
--------------------------------------------- 4
<div class="aaa">
<sss>this is span 1</sss> <br>
<sss class="bbb">this is span 2</sss> <br>
</div>
--------------------------------------------- 5
<div class="aaa"> this is span 1 <br> </div>
<div class="bbb"> this is span 2 <br> </div>
<div class="aaa bbb"> this is span 3 <br> </div>
<div class="bbb aaa"> this is span 4 <br> </div>
<div class="aaa">
<div class="bbb"> this is span 5 <br>
</div>
</div>
<div class="bbb">
<div class="aaa"> this is span 6 <br>
</div>
</div>
<h2><b>
</body>
</html>
吃水不忘挖井人
参考：浅谈CSS选择器中的空格 http://www.cnblogs.com/hellolong/articles/4021926.html