CSS基础教程（三）选择器：CSS选择器，id和class的爱恨情仇！

摘要：

在CSS的世界里，选择器就是我们的魔法咒语，而id和class则是其中最常用的两大法宝。很多初学者常常混淆它们，就像分不清咖啡杯和马克杯一样——虽然都能装咖啡，但用法和场合大不相同！

1. 为什么需要选择器？

想象一下，你走进一个拥挤的房间，里面挤满了人。如果你想叫某个特定的人，你会大喊他的名字（id）；如果你想叫一群有共同特征的人，比如"所有戴眼镜的人"，你会喊特征（class）。CSS选择器就是这样工作的！

<!-- 想叫特定的人 -->
<div id="zhangsan">张三</div>

<!-- 想叫一群有共同特征的人 -->
<div class="glasses">戴眼镜的王五</div>
<div class="glasses">戴眼镜的赵六</div>

2. id选择器：CSS中的"独行侠"

2.1 基本用法

id选择器就像给你的HTML元素一个独一无二的身份证号码。在同一个页面中，每个id只能使用一次，这是W3C的明确规定！

#special-button {
  background-color: #ff0000;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

<button id="special-button">点击我！</button>

2.2 id的特性

• 高特异性：id选择器的权重非常高，具体来说是0-1-0-0
• 唯一性：就像人类的身份证号码，同一页面不能有重复id
• JavaScript钩子：经常被用作JavaScript操作的目标元素

2.3 什么时候使用id？

1. 页面主要结构区块（header, main, footer）
2. 需要JavaScript操作的特殊元素
3. 锚点链接跳转目标

<header id="main-header">网站头部</header>
<main id="content">主要内容</main>
<footer id="footer">网站底部</footer>

<!-- 锚点链接示例 -->
<a href="#section1">跳转到第一节</a>
<!-- 很多内容之后 -->
<section id="section1">这里是第一节内容</section>

3. class选择器：CSS中的"社交达人"

3.1 基本用法