Home >  > 在CSS中 ID与Class的区别

在CSS中 ID与Class的区别

13

CSS中ID和CLASS有什么区别? 有的新手对此非常迷茫,不知道什么时候该用id,什么时候该用class。这两个选择器让新手左右为难。

1、id 是唯一的而 class不是,id一个页面只可以使用一次;class可以多次引用。在web标准中是不容许重复ID的,如果从头到尾浏览源代码,你会发现只有一个 id="header" 和一个 id="container",但是有多个 class="entry"。

2、属性的优先级问题:ID 的优先级要高于class,我们在下面的代码中有示例说明。

3、在CSS文件里书写时,ID加前缀"#";CLASS用"."

那么 header 和 container 可以用 class 去取代 id 吗?完全可以。

原载: 蜗牛博客

网址: http://www.snailtoday.com/

版权所有。转载时必须以链接形式注明作者和原始出处及本声明。

Updated on Mar.28.2017

今天发现自己还没有记住。

先举个例子来区分它们两个:
例如,在一个屋里,有很多人,那么ID就是人的名字,而Class是衣服。
如果两个人名字相同就会出现混淆,而如果两个人穿同样的衣服就不会出现类似状况。所以明白这个比喻之后,他们俩的关系你就明白了一半!

下面来说说它们两个的区别
从定义上来说:
id是元素的名称,可以供js或其它脚本程序来访问该元素对象
class是该元素的css类名。
从W3C原则规定方面
ID具有唯一性,即ID在一个页面里唯一性。
Class具有普遍性

ID与CLASS的使用技巧 www.2cto.com
1. 子级名字中包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。
2. CLASS中的子级最好不用ID。
3. CLASS的命名最好命名用大小写合用。
例 .newMovie这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是IE以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头
ID与class的优先级不同
优先级来看: Style > ID > Class > 缺省的Html元素

通过实践总结
1、ID具有唯一性,并且尽量在外围使用。而CLASS具有可重复性,并且尽量在结构内部使用 。
2、这样有利于后期维护与修改,让所有的CLASS都成为ID的子级或是孙级.
3、出现重复定义时,从优先级来看是: Style > ID > Class > 缺省的Html元素

 

 

本文暂无标签
Comment (13)
Trackback (0)
  1. 友杰博客 unknowunknow 沙发 2013/04/06 03:46

    今天写了篇关于投稿卢松松博客后的感悟,希望哥们可以去看看,谢谢

  2. gd域名优惠码 unknowunknow 板凳 2013/04/06 03:48

    这个没有用过

  3. 脚轮 unknowunknow 地板 2013/04/07 01:10

    他写的就是不错的。专业的就是专业的

  4. 精油 unknowunknow 4楼 2013/04/08 23:50

    我经常修改网页,但是还真没详细学习过CSS基础知识!今天来学习一下!感谢博主分享!

  5. 脚手架 unknowunknow 5楼 2013/04/09 02:11

    挺好的 支持一下

  6. 宁波遮阳篷 unknowunknow 6楼 2013/04/09 07:29

    在CSS中ID与Class的区别有时候挺为难新手的

  7. 鲨鱼商城 unknowunknow 7楼 2013/04/09 07:43

    嗯,分析的很到位。

  8. 屠龙团队 unknowunknow 8楼 2013/04/09 07:57

    这两者之间的区别,是学CSS最难的一个地方,我个人感觉。

  9. 言情小说排行榜 unknowunknow 9楼 2013/04/10 07:23

    学到东西了,谢谢哈

  10. www.gzsclf.com unknowunknow 10楼 2013/04/25 07:18

    css是个神奇的东西来的

  11. 科技小玩意儿 unknowunknow 11楼 2013/04/25 11:19

    额,一直不知道这俩标签的区别,一般都用id,因为#更显眼些。。。。

  12. egg平台 unknowunknow 12楼 2013/04/30 13:49

    楼主分析的很好啊,对我很有帮助,谢谢了,从中学到了很多东西.

  13. yxiao unknowunknow 13楼 2013/05/03 15:34

    楼主开始学css吗

  • 还没有Trackback

发表评论

*

*