CSS中何时使用id何时使用class

CSS中的选择符除了可以选择HTML预定义的标签,比如<a>,<p>,<div>。但是可以选择用户自己定义的id或者class。id与class的最主要不同就在于id不能重复,只能使用一次,一个id只能用于一个标签。而class可以重复使用,同一个class可以定义在多个标签上。实际上从名称就能看出来id与class的区别,id是识别符,而class是类。

那么什么时候使用id,什么时候使用class?根据我的经验来看id用于特殊的标签上,因为这个部分就这么一个,没有与其他的地方重复的。而class主要用于一类有同样特征的元素上。因为id只能用一次,class可以无限次使用。

打个比方,就以一个Blog来说。一个Blog只会有一个头部,用于放置Blog的名称和Logo之类的信息。因为就只有这么一个,所以定义id是最适合的,没有其他的地方与头部类似。而在Blog首页可以显示多篇文章,一般都是10篇,那么每篇文章的内容区域都有一个类似的样式,所以定义class是最合适的,因为有10个同样样式的部分,为同一个class定义样式可以应用于10个拥有同样的class值得元素上。

也就是说,只有一个独立样式的元素适合用id,而有多个元素拥有同样的样式的话适合使用class。

4 Comments

  1. 这几天做公司里的东西时也考虑了这个问题,还是尽量用class吧
    因为一个网站很大时,你不知道其他前台是怎样定义名称的,像php这类elements结合的,一不小心2个相同id遇到一起就麻烦了,而class的话可以定义不同位置的
    当然最好起有意义的名字,这样就不容易撞车了~
    我觉得哦。。。。

    Reply
    • 是啊,id定义的时候一定要能够通过名称就能了解它的作用,长一点没有关系。具体一点的话可以避免不必要的冲突。

      Reply

Leave a Comment.