CSS类选择器和ID选择器

ID用于标识页面上的特定元素（比如站点导航），而且必须是唯一的。

ID也可以用来标识持久的结构性元素，例如主导航或内容区域。

ID还可以用来标识一次性元素，例如某个链接或表单元素。

一个ID只能应用于页面上的一个元素。

同一个类名可以应用于页面上任意多个元素，因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。例如有一个新闻页面，其中包含多篇新闻，代码如下所示

    <div id="story-id-1">
        <h2>ID</h2>
        <p>ID用于标识页面上的特定元素（比如站点导航），而且必须是唯一的。 ID也可以用来标识持久的结构性元素，例如主导航或内容区域。 ID还可以用来标识一次性元素，例如某个链接或表单元素。 一个ID只能应用于页面上的一个元素。
        </p>
    </div>
    <div id="story-id-2">
        <h2>类</h2>
        <p>同一个类名可以应用于页面上任意多个元素，因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。
        </p>
    </div>

不必给每篇新闻分配不同的ID，可以给所有新闻分配一个类名news.

    <div class="news">
        <h2>ID</h2>
        <p>ID用于标识页面上的特定元素（比如站点导航），而且必须是唯一的。 ID也可以用来标识持久的结构性元素，例如主导航或内容区域。 ID还可以用来标识一次性元素，例如某个链接或表单元素。 一个ID只能应用于页面上的一个元素。
        </p>
    </div>
    <div class="news">
        <h2>类</h2>
        <p>同一个类名可以应用于页面上任意多个元素，因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。
        </p>
    </div>

在分配ID和类名时，一定要尽可能保持名称与表现方式无关。例如，如果希望所有表单通知消息显示为红色，可以给他们分配类名red。只要页面上没有其他红色的元素，这就没问题。但是，如果还希望让4个必需的表单标签也显示为红色，就必须猜测这个类引用的是哪种元素，这时情况就有些混乱了。想象一下，如果在整个网站上到处使用表现性元素，代码会多么混乱。如果决定把表单通知由红色改为黄色，就更复杂了。在这种情况下，必须修改所有类名，否则名为red的元素就会显示为黄色。

因此，应该根据“它们是什么”来为元素命名，而不应该根据“它们的外观如何”来命名，这种方式会让代码更有意义，并且避免代码与设计不同步。对于前面的示例，不要给通知分配类名red，而是应该分配更有意义的名称，比如，.warning或.notification。有意义的类名的最大优点是可以在整个网站中重用它们。例如，还可以在其他类型的消息上使用.notification类，可以根据它们在文档中的位置应用完全不同的样式。

差的名称	好的名称
red	error
leftColumn	secondaryContent
topNav	mainNav
firstPara	intro

CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式，同时二者皆区分大小写,为了容易辨认，最好统一采用完全小写的类名和ID，多个单词之间用连字符分隔，例如，andy-budd比andyBudd清楚的多。

 

ID还是类？

相信你曾和我一样，常常很难决定一个元素应该使用ID还是类名。一般原则是，类应该应用于概念上相似的元素，这些元素可以出现在页面上的多个位置，而ID应该应用于不同的唯一的元素。

只有在目标元素非常独特，绝不会在网站上其他地方别的东西使用这个名称时，建议使用ID。换句话说，只有在绝对确定这个元素只会出现一次的情况下，才应该使用ID，如果你认为以后可能需要相似的元素，就是用类。

 

最后总结区别如下：

第一：在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class

第二：当页面中用到js或者要动态调用对象的时候，要用到id（当然class也会用到，但是id更常用）。

第三：id选择器不能结合使用，class可单独使用，也可与其他元素结合使用。

第四：class有多类选择器，id选择器则无，如

<p class="important warning">
This paragraph is a very important warning.
</p>