学习CSS中class与id区别，轻松提升网页设计技能！

：为何 class 与 id 的细微差别决定你的网页命运

当你第一次打开编辑器， 看到一行行的 CSS 时有没有以前感到既兴奋又有点迷茫？那种“代码像魔法一样让页面活过来”的感觉，往往伴因为对选择器的困惑。今天我们不只是要记住哪个符号该加点还是井号， 嚯... 而是要真实正体会它们背后的设计哲学思想——那就是怎样让样式既灵活又可控。掌握这一点，就像在画板上找到了最合适的笔触，才能让每一次点击都充满自信。

基础概念：ID 是仅有的标识符， CLASS 是可复用的类别

在 HTML 中，id 属性就像人的身份证号码——全站只能出现一次任意反复都会让浏览器在解析时产生警告。而class则更像是衣服上的标签， 同一件衣服能够穿在很更多人身上， 加油！ 也能够给不同的人穿上不同的颜色。正是这种“单例”与“更多例”的差别，决定了它们在样式表中的作用范围和优先级。

语法上的表现

在 CSS 文件里 ID 前面必须要加一个井号，举个例子 #header { … }；CLASS 前面则是一个英文半角句号， 又爱又恨。 如 .nav-item { … }。这一细微的符号差别，却是浏览器判断选择器类型的关键依据。

作用域与反复采用

层次低了。 虚假如你给一个同时也写了,那么当前这个元素既拥有仅有的 ID 主键，又具备可被其他元素共享的 CLASS 特性。当页面中出现两个相同 ID 时 虽然页面有可能仍能正常体现，**但 W3C 验证会报错**，这也是为哪些很更多前端规范强较大调“ID 必须要仅有”。反过CLASS 没有数量约束，你能够把同一个类应用于十个、甚至一百个元素。

较深入探讨：四个维度协助你彻底区分 class 与 id

第一维度：优先级层次

当同一个元素同时也被 ID 和 CLASS 选择器匹配时**ID 的权沉重更较高**。