浅谈CSS选择器中的空格

HTML文档是一棵树的结构，各元素以一种层次结构为基础构成‘树’的视图。文档树中的每个元素，要么是另一个元素的父元素，要么是另一个元素的子元素，这样，各元素之间就形成了‘父子关系’。基于这样的关系模型，CSS定义了后代选择器（descendant selector）也称为上下文选择器（contextual selector）。

后代选择器的写法为，子代元素以空格与父元素形成连接关系构成选择器，如：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->div span{color:blue;}

以上规则的结果为：“作为div元素后代的任何span元素显示为蓝色字体”。

选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“...在...中找到”、“...作为...的一部分”、“...作为...的后代”，但是要求必须从右向左读选择器——《CSS权威指南》第三版

CSS还有两种选择器：类选择器和ID选择器，个中细则不是本文陈述的重点。本文的重点是：空格在后代选择器、类选择器和ID选择器相结合的情况中的种种问题，及解决方式。

先看看以下的规则：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->div.blue {color:blue;}

以上规则的结果为：“所有class属性值为blue的div元素显示为蓝色字体”。然而我的要求并不是这样，我的要求是：“作为div元素后代的任何class属性值为blue的元素显示为蓝色字体”。试试以下的规则：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->div .blue{color:blue;}

以上规则的改进之处为'div'与'.blue'之间多了一个空格，这样是否就能形成后代选择器呢？答案是否定的！该规则实现的结果依旧是：“所有class属性值为blue的div元素显示为蓝色字体”。

那么该怎么结合类选择器构成后代选择器的效果呢？方法是有的，那就是给父元素div设置一个class或者id属性，假设我给它加上一个class属性，于是规则就变为：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->div.contain .blue{color:blue;}

以上规则的结果为：“所有class属性值为contain的div元素，其后代中class属性值为blue的任何元素显示为蓝色字体”。结果虽然不能完全达到我的苛刻要求，但已经很接近了。接近了，效果一定是很明显的，然而我却发现完全没有了蓝色字体，因为我把规则写为：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->div.contain.blue{color:blue;}

以上规则的不同之处在于，'.contain'与'.blue'之间少了一个空格！少了空格，以上选择器就不是后代选择器了，而是另外一种选择器：“多类选择器”。

在HTML中，一个class值中有可能包含一个词列表，各个词之间用空格分隔。那么以上的多类选择器只能将规则应用于如下形式的元素中：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><div class="contain blue">text</div>

以上的class属性值少了其中一个都无法将字体显示为蓝色！ 

将以上规则放在一起，比较起来会清晰一点：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1 div.contain .blue{color:blue;}/*后代选择器*/
2 div.contain.blue{color:blue;} /*多类选择器*/

以上两种规则分别应用的元素如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1 <div class="contain">contain<span class="blue">blue</span><!--后代-->
2 <div class="contain blue">contain and blue</div><!--多类-->

值得注意的是：ID属性不允许有以空格分隔的词列表。所以以下的规则将无法应用到任何元素：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->div#contain#blue{color:blue;}

以上的规则将无法应用到任何元素。你只能乖乖地用空格将两个ID选择器分隔，构成后代选择器。

综上，选择器之间的空格是一种结合符，如果要构成后代选择器，则空格两边的选择符必须为如下两种形式：

1. 元素选择符 空格 元素选择符
2. 非元素选择符 空格 非元素选择符 

后代选择器中绝对不可能出现的一种情形：元素选择符 [空格] 非元素选择符。

最重要一点：两个类选择器之间存在空格则构成后代选择器，之间没有空格的则构成多类选择器。

参考资料：《CSS权威指南：第三版》Eric A.Meyer著 尹志忠 侯妍译