正在加载...

HTML 的 class

学完 div 后使用可复用的 class 标签挂接样式。

为什么共享名称更好

样式保持一致。

直接答案

写 class="note"，可共享，用空格分隔多个名。CSS 用 .note。属性值里不要写 #。

📊 class in HTML vs CSS

Place	What you write	Role
HTML attribute	class="note"	Labels the element (no leading dot)
CSS selector	.note	Selects elements that have that class
Multiple names	class="card featured"	Space-separated list in HTML
Same idea in CSS	.card.featured	Element that has both classes (advanced combining)

多个元素共享 class

两个段落 class="note"。

Shared class

html

HTML Code

<p class="note">Save often.</p>
<p class="note">Use clear names.</p>
<style>
.note { color: #0b4; font-weight: 600; }
</style>

阅读共享示例

都是 note
.note 选中该组

一个元素多个 class

同时使用 card 与 featured。

Multiple classes on one element

html

HTML Code

<div class="card featured">
<h2>Featured tip</h2>
<p>Classes can combine on one box.</p>
</div>
<style>
.card { padding: 12px; border: 1px solid #444; }
.featured { border-color: #0a7; }
</style>

阅读多 class 示例

两个记号
.card + .featured

命名习惯

短而清晰。

练习

两个 tip
样式 .tip
第二个 class
修正拼写错误

易错点

class 里写 #
用逗号不用空格
在 HTML 里写 .note

小结

class = CSS/JS 钩子
共享与组合
下一课：id

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言