从来都不要认为一件事情简单就不去仔细研究，CSS本身是比较简的但要想完全凌驾其上也不是一朝一夕的事，平常做页面时就要多做总结，积累才是学习的最好方法。

正题：

在我们写CSS时遇到两个选择器不同规则相同的情况大多会用到多元素选择器，因为这样在某种情况下会少写一条相同的规则，比如：

#display-block{ display:block; }
.display-block{ display:block; }

合并为：

#display-block, .display-block{ display:block; }

这个地球人都知道？往下看…
毫无疑问上面这种方法大大的精简了代码，但是在实际操作中我发现并非所有的情况都如我所愿。比如：

#display-block{ display:block; color:red; }
.display-block{ display:block; color:black; }

合并为：

#display-block{ color:red; }
.display-block{ color:black; }
#display-block, .display-block{ display:block; }

对比一下这两段代码，你会发现下面合并过的比上面没合并的多了大约18个字符，换句话说就是合并并没有达到精简代码的效果，反而比原来的还长了。

总结一：当某选择器有单一CSS规则时，用分组选择器会达到精简代码的作用。

再来看一种情况：

#f1{ display:block; color:red; }
#f2{ display:block; color:black; }

合并为：

#f1{ color:red; }
#f2{ clor:black; }
#f1,#f2{ display:block; }

对比一下合并后大概节省了7个字符。

总结二：当N个（短）选择器下含有至少1条相同CSS规则，用分组选择器优化其中某条规则时可能会达到效果。

能否达到效果要看其中的“短”和“某条”的字符长度。用个小学生方程吧：设它俩字符长度为X，Y 那么：

当 Y*N>X*N+(N-1)+2+Y 时，总结二成立。否则不成立。

解释：

• N-1表示分组选择器之间的“,”
• 2表示多出来的“{}”

好了！一个简单的结论出来了哈。不过貌似没多大意义，也只做折腾罢了。匆深究^!^

附：CSS森林博客作者制作的CSS压缩工具：mergeCSS