今天在写网站的时候发现一个很奇怪的现象，大概情况是这样的
#head #logo #logoleft {…color:#fff;…}
#logoleft ul {…}
#logoleft ul li {…color:#000;…}
我定义的div的顺序依次是head, logo, logoleft，然后在logoleft里面有ul和li。我有个不太好的书写CSS的习惯，我喜欢用id，而不是class，而且id喜欢像上面例子中一样一层套一层，这样看起来有条理，容易维护。遇到特别深的div嵌套时，我就会省略前面的几层，如上面，我会省掉#head #logo。这样一直用的很好，但今天遇到了一个问题，让我觉得这样写css其实并不好。
也许有经验的读者已经发现问题的所在了，li中的color定义是不起作用的。我希望在logoleft中定义一个这个div以及它的子类都继承的color，但又想对里面的li单独进行color的定义。但结果是li中的color是不起作用的。
为什么会出现这种情况呢？原因就在于CSS规则的特殊性计算上。
CSS在解析的时候，首先会计算CSS规则的特殊性。先给各个选择器分配一个数字值代表其特殊性，将规则的各个选择器的值加起来就是规则的特殊性。为了保证非常特殊的选择器（如ID）不会被大量的一般选择器（如Class）覆盖掉，CSS赋予了特殊的选择器（如ID）比一般选择器（如Class）要高的多的值，如相差10倍。基本上能够达到的效果就是，用style属性编写的规则总是比其他任何规则特殊；具有ID的规则比没有ID的规则特殊；具有类选择器class的比没有类选择器的规则特殊。如果两个规则的特殊性一样，后面覆盖前面的。
在上面的例子中，第一行的css由三个id组成，其特殊性远高于第三行的一个id定义的css，所以使得第三行的css失效。要想让第三行的css起效果，改正的方法很简单，只要在前面加上省略的父类id就可以了，#head #logo #logoleft ul li {…color:#000;…}。
如果你遇到了似乎没有起作用的css时，很可能是出现了跟我一样的问题——css规则特殊性冲突。你可以在你的选择器中加入它的父类的id来增加它的特殊性。当然，如果你的id嵌套太多的话，为了保证特殊性不冲突，会让你的css代码无畏的增加很多没有的开销，所以，我现在认识到了我自己写css的习惯并不好。建议大家多用class，少用id。因为class中定义的属性特殊性不高，很容易被覆盖或修改，而要覆盖id中的属性，则需要增加很多id嵌套。
