CSS 的 ID 和 Class 有什么区别？如何正确使用它们

下摘自《精通CSS：高级Web标准解决方案第2版》，希望对你有用。

常常很难决定一个元素应该使用ID 还是类名。一般原则是，类应该应用于概念上相似的元素，这些元素可以出现在同一页面上的多个位置，而ID 应该应用于不同的唯一的元素。但是，究竟哪些元素是概念上相似的，哪些元素是唯一的？
例如，假设你的网站顶部包含主导航，在搜索结果页面的底部包含基于页面的导航，在页脚上还有另一个导航。是给它们分配不同的ID（比如main-nav、page-nav和footer-nav），还是都给它们指定nav类，然后根据它们在文档中的位置应用样式？我以前喜欢使用前一种方法，因为它的针对性更强一点儿。但是，这有几个问题。如果我现在需要把搜索结果导航放在搜索页面的顶部和底部，或者需要在页脚中有两级导航，那会怎么样？如果使用大量ID，很快就会难以找到唯一的名称，最终不得不创建非常长、非常复杂的命名约定。因此，现在我比较喜欢使用类名。只有在目标元素非常独特，绝不会对网站上其他地方别的东西使用这个名称时，才会使用ID。换句话说，只有在绝对确定这个元素只会出现一次的情况下，才应该使用ID。如果你认为以后可能需要相似的元素，就使用类。保持命名约定通用，并且使用类，就不会出现一长串ID选择器都与非常相似的样式相关联的现象：
只需用一个普通的类替代它们：

由于类具有灵活性，所以它们是非常强大的。同时，它们也可能被过度使用或滥用。CSS新手常常在几乎所有东西上添加类，从而试图更精细地控制它们的样式。早期的WYSIWYG编辑器也倾向于在应用样式的每个地方都添加类。许多开发人员在使用编辑器生成的代码学习CSS时继承了这个坏习惯。这种现象称为"多类症"（classitis），在某种程度上，这和使用基于表格的布局一样糟糕，因为它在文档中添加了无意义的代码。

在前面的示例中，通过使用一个与新闻相关的类名，每个元素都被标识为新闻的一部分。这使新闻标题和正文可以采用与页面其他部分不同的样式。但是，不需要用这么多类来区分各个元素。可以将新闻条目放在一个部分中，并且加上类名news，从而标识整个新闻条目。然后，可以使用层叠（cascade）来识别新闻标题和文本。

只要你发现类名中出现了重复的单词，比如news-head和news-link 或者section-head和section-foot，就应该考虑是否可以把这些元素分解成它们的组成部分。这会让代码更"组件化"，会大大提高灵活性。
以这种方式删除不必要的类有助于简化代码，使页面更简洁。稍后，将简要讨论CSS选择器和为样式寻找目标。无论如何，这种对类名的过度依赖是完全不必要的。如果你发现自己添加了许多类，那么这很可能意味着你的HTML文档的结构有问题。

如果只说CSS，上面那一句话就讲完了。


拓展出来，对于html而言，id和class都是dom元素的属性值。不同的地方在于id属性的值是唯一的，而class属性值可以重复。

id还一个老特性是锚点功能，当浏览器地址栏有一个#xxx，页面会自动滚动到id=xxx的元素上面。

 

ID's are unique. Each element can only have only one ID. Each page can have only one element with that ID Classes are NOT unique You can use the same class on multiple elements. You can use multiple classes on the same element. CSS doesn'… 显示全部

ID's are unique.
Each element can only have only one ID.
Each page can have only one element with that ID

Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.

Note:There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.
Note:An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.

Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.

也就是说，id 通常应该由纯数字组成，且不应该包含特别的含义。





简言之就是，id是身份证应用中唯一。class是类别标识，表明当前元素属于哪一类。关于用法上，最容易误用的就是class，按照w3c的描述，class应该是描述内容的本质(语义)的而不是内容长什么样的，也就是说，你不应该写非语义化的class。典型的反面教材就是 class="fl mr10" 之流。

 

id和class都可以写式样，但要对复数的元素设置同样的式样只有用class。 id更加多的作用是用来标记唯一，比如后端生成的序列号。 因为id的优先级比class高很多，所以通常不建议使用id写式样。因为在迭代过程中，修改式样每次都要查找是否有id覆盖掉修改的式… 显示全部

id和class都可以写式样，但要对复数的元素设置同样的式样只有用class。

id更加多的作用是用来标记唯一，比如后端生成的序列号。

因为id的优先级比class高很多，所以通常不建议使用id写式样。因为在迭代过程中，修改式样每次都要查找是否有id覆盖掉修改的式样。

指名道姓就用ID，找一类同样的就用class

 

在样式表定义一个样式的时候，可以定义id也可以定义class。 1、在CSS文件里书写时，ID加前缀"#"；CLASS用"." 2、id一个页面只可以使用一次；class可以多次引用。 3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现… 显示全部

在样式表定义一个样式的时候，可以定义id也可以定义class。

1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."

2、id一个页面只可以使用一次；class可以多次引用。

3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；

4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。

转自 DarkZone 小前端/死宅男/偶尔抽风/时常不正经 ；