1. ID (身份证)
👤
唯一的你
ID 是唯一的。在一个页面中,同一个 ID 只能出现一次。
就像你的身份证号码。
HTML:
<div id="header">...</div>
CSS (用 # 号):
#header { background: red; }
⚠️ 绝对规则: 一个页面不能有两个 id="header"!
2. Class (社团徽章)
👥
大家族
Class 是分类。多个元素可以拥有同一个 Class。一个元素也可以拥有多个 Class。
就像“篮球社成员”这个身份。
HTML:
<p class="error">错误1</p>
<p class="error">错误2</p>
CSS (用 . 号):
.error { color: red; }
3. 什么时候用哪个?
这是一个困扰新手很久的问题。极客建议:
- 🔵 尽可能使用 Class。 因为它灵活,可复用。
- 🔴 ID 留给 JS。 通常我们会用 ID 来做 JavaScript 的钩子(比如点击某个特定的按钮)。
- 🟢 不要过度设计。 别给每个标签都加 ID,你会累死的。