CSS选择器中的空格

今天工作时同事问写css选择器时加空格与不加空格的区别。由于我一直用的后代选择器，于是就以为没有任何区别。为保险起见查了一下百度，竟然是有区别的。

1. div.contain .blue{color:blue;}
2. div.contain.blue{color:blue;}

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

1

  <!--后代-->
  <div class="contain">
     contain
  <span class="blue">blue</span>
  </div>

2

<!--多类-->
<div class="contain blue">contain and blue</div>

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

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

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

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

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

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

原博链接如下：http://blog.sina.com.cn/s/blog_6b904b690100o8zv.html.