当先锋百科网

首页 1 2 3 4 5 6 7

今天工作时同事问写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.