CSS分组（多元素）选择器使用小记

CSS分组（多元素）选择器使用小记

　　从来都不要认为一件事情简单就不去仔细研究，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表示多出来的“{}”
　　
　　好了！一个简单的结论出来了哈。不过貌似没多大意义，也只做折腾罢了。匆深究^!^