前两天在改写 css 时，该死的触摸屏，一不小心正好就给 css 中的选择器中添加了一个空格，导致原本好好的页面乱了，还排查了好一会。记得自己平时写 css 用这些选择器的时候都还是很小心的。。。。。不多说了，平时不太注意选择器写法的童鞋注意咯：

#header.nav-bar {
    background-color: #999;
}
#header .nav-bar  {
    background-color: #333;
}

在你平时是的项目中否有关心过上述两种的写法呢，其中下面的一个有#header 于 .navbar 之间有一个空格。下面来看两个简单的例子： 2、不带空格：

#header.nav-bar  {
   background-color: blue;
}

<div id="header" class="nav-bar">
  <p>item</p>
  <p>item</p>
</div>

你会发现整个 div 的背景色都为蓝色，然而我们看看第二种情况： 1、带有空格：

#header .nav-bar  {
   background-color: blue;
}

<div id="header" class="nav-bar">
  <p>item</p>
  <p>item</p>
</div>

nav-bar 的样式并没有应用到这个 div 中。

PS，可能在刚开始开发一些项目的时候很少去关注这些，不过项目大了，复杂了，各种 css 的冲突会然你很头疼，那么如果一开始都注意在用选择器的时谨慎点我想后期的升级维护都会容易得多。个人的一点拙见啊，更多选择器可参见：http://www.w3.org/TR/CSS2/selector.html