css id选择器,css类选择器和id选择器的区别

　　最近在做一些CSS样式的性能测试，然后有朋友问我：为什么不用id作为页面上一些具体的内容部分呢？

　　这个问题很难回答，原因如下：

　　页面中的此元素不能重复使用。

　　向下螺旋引起的特异性

　　IDs用于标识一些非常特殊的内容，但是以抽象为代价。

　　性能可以通过其他方式解决。

　　下面就这四点进行深入讨论。

　　无法重用页面元素。

　　IDs相当于程序员的singleton。一个页面中不允许有两个相同的id(当然浏览器不会报错)，也就是说不能重用一个元素，相当于一对一的关系。根据我的速度测试，如果一段CSS代码只对一个元素起作用，对速度没有好处，还会带来CSS扩展的额外成本。

　　译者：下面一节的翻译有点混乱。如果不懂，请阅读英文原文。

　　向下螺旋引起的特异性

　　关于CSS重载的两种方法：

　　级联：(下一级的任何元素都可以覆盖上一级的CSS规则)

　　特异性：通过使用加权选择器来创建权重的想法。

　　为什么我说这是一个向下的螺旋？因为为了重载一个高优先级的规则，我不得不设置一个更高的优先级。ModuleOfficeList。属性-复选框输入{ display:block；边距-底部：8px_border:0px！重要；}。ModuleOfficeList。属性-复选框。ModuleOfficeList。新图标。ModuleOfficeList。打开图标{display:block}

　　.uid-office列表。属性-复选框{display:none！重要；}

　　以上是我2005年的一段真实代码，最后还得用上面的代码！重新排序选择器规则的重要规则。这可不好。一旦我们这样做了.这需要我们花更多的时间来追捕父母的ID，我们将推翻目前的特异性。这是不友好的，也不利于维护。最终，你会掉进自己挖的坑里。只有重建才能摆脱这个噩梦。

　　另一方面：

　　我听到一些关于使用ID选择器的声音。

　　使用ID选择器更快

　　是的，这是真的，我已经证明了。但是性能是最低的，但是当您使用嵌套的其他选择器时，性能会下降：

　　#配置文件-模块{.}

　　#配置文件-模块li {.}。配置文件-模块li {.}

　　第二个选择器没有第三个来得快，因为CSS是从右到左的，所以会先扫描李，所以按ID定位会直接忽略。

　　参见Steve Souders解释选择器速度如何影响CSS选择器的性能。

　　IDs表示单个实例。

　　许多人会在页面中定义ID，但是如果一个元素在所有页面中只出现一次，那么使用ID选择器就可以了。我唯一的声明是，所有代码都应该是可重用的，如果可以避免，就尽量避免。