class选择器以点号开头，可多元素复用，权重为10；id选择器以井号开头，页面唯一，权重为100，优先级更高，常用于唯一结构与JS快速获取。
在CSS中，class选择器和id选择器都是用来选中HTML元素并为其应用样式的，但它们在使用方式和规则上有明显区别。
1. 语法不同
class选择器使用点号（.）开头：
.my-class { color: blue; }
id选择器使用井号（#）开头：
#my-id { font-size: 16px; }
2. 使用范围不同
一个class可以在多个元素上重复使用，适合为一类元素设置相同样式：
立即学习“前端免费学习笔记（深入）”；
多个元素可以拥有相同的class名 常用于组件、按钮、标题等通用样式
而一个id在一个页面中应唯一，只能用于一个元素：
PicDoc
AI文本转视觉工具，1秒生成可视化信息图
6214 查看详情 
每个id在整个页面中只能出现一次 适合标识页面中唯一的结构，如导航栏、页脚
3. 权重不同
id选择器的优先级高于class选择器。当多个规则作用于同一个元素时，id样式会覆盖class样式：
id选择器权重为 100 class选择器权重为 10
这意味着即使class样式写在后面，id样式仍可能优先生效。
4. JavaScript操作中的用途
在JavaScript中，通过id获取元素更直接：
document.getElementById(‘my-id’)
而class通常用于批量操作：
document.getElementsByClassName(‘my-class’)
基本上就这些。简单说：class是“类别”，可复用；id是“身份证”，唯一且权重高。根据需要选择使用即可。
以上就是在css中class选择器与id选择器区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/989801.html
微信扫一扫 
支付宝扫一扫 
