CSS 中的 id 和 class 你该选择哪一个?

对于CSS而言,id和class都是选择器,唯一不同的地方在于权重不同。
如果只说CSS,上面那一句话就讲完了。
拓展出来,对于html而言,id和class都是dom元素的属性值。不同的地方在于:

id属性的值是唯一的,而class属性值可以重复

  • id具有唯一性,class具有普遍性。
  • id是唯一的,所以尽量在结构外围使用,通常用于页面布局。
  • class是可重复的,所以尽量在结构内部使用,通常用于样式定义。
  • id的样式优先级高于class。

其实在样式表定义一个样式的时候,即可以定义id也可以定义class。

1、在CSS文件里书写时,id加前缀"#";class用"."
2、id一个页面只可以使用一次;class可以多次引用。
3、id是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构和内容上,就象一件衣服;
4、从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。
5、一个标签的id属性的值只能有一个,而class属性的值可以有多个。

目前的浏览器还都允许用多个相同ID,一般情况下也能正常显示,不过当你需要用JavaScript通过id来控制div时就会出现错误。
id还一个老特性是锚点功能,就是当浏览器地址栏有一个#xxx,页面会自动滚动到id=xxx的元素上面。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,699评论 19 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,199评论 1 92
  • 01 前两天在网上看到一个话题征集:哪个瞬间让你觉得世上坏人真多。其中有一个网友的留言得到了最多人数的点赞。 他说...
    猫妖叨叨阅读 5,005评论 12 24
  • 是不是一直觉得欠自己一个交代,如果你可以回头,是不是会对当时的自己抱一抱,然后说一句,加油,一切都会好的。 ...
    Miranda_Y阅读 193评论 0 0
  • Business: Schumpeter: Leaving for the city Lots of promin...
    Sharon667阅读 338评论 0 0

友情链接更多精彩内容