第 8 课 2 / 18 ｜ 编码：L08-06
核心知识

元素、类与 ID 选择器

元素选择一类标签，类描述可复用角色，ID 应在页面中唯一。

对照代码

<style>
p { color: navy; }
.card { background-color: #e8f2f5; }
#main { border: 2px solid teal; }
</style>
<main id="main">
  <p class="card">唱腔赏析</p>
  <p class="card">服饰与舞台</p>
</main>

01 · 匹配与含义

p 选择所有段落

02 · 规则与结果

.card 可复用于多个组件

03 · 观察要点

#main 适合唯一定位，不宜承担所有样式

展开完整代码与运行演示
<style>
p { color: navy; }
.card { background-color: #e8f2f5; }
#main { border: 2px solid teal; }
</style>
<main id="main">
  <p class="card">唱腔赏析</p>
  <p class="card">服饰与舞台</p>
</main>