大家好，欢迎来到无限大的频道。
类选择器和ID选择器都是CSS中用于选择元素并应用样式的工具，但它们有一些关键的区别：
- 语法
-
类选择器：以点号（
.）开头，后面跟类名。一个类选择器可以选择多个元素。 -
例如：
.my-class，用于选择 class 属性为my-class的所有元素。 -
ID选择器：以井号（
#）开头，后面跟ID名。一个ID选择器只能选择一个特定元素，因为在一个HTML文档中，ID属性应该是唯一的。 -
例如：
#my-id，用于选择 id 属性为my-id的元素。
- 使用场景
- 类选择器：适用于当你需要对多个元素应用相同的样式时。例如，多个不同的段落、按钮或其他元素可能会共享一个类。
<p class="highlight">这是一个高亮段落。</p>
<p class="highlight">这是另一个高亮段落。</p>
- ID选择器：用于需要唯一标识的元素，例如一个网页的导航、页脚或特定的内容区域。由于不能在同一文档中重复使用ID，因此通常用来选择特定的元素。
<div id="header">网站标题</div>
<div id="footer">网站底部信息</div>
- 优先级
- 类选择器：在CSS中的权重相对较低。
- ID选择器：在CSS中的权重相对较高。在同样的情况下，如果有冲突，ID选择器的样式将覆盖类选择器的样式。
- 定义与引用
- 类选择器可以在HTML元素的
class属性中使用，可以在多个元素上使用同一个类。
<div class="box"></div>
<span class="box"></span>
- ID选择器只能在HTML文档中一个元素的
id属性中使用，必须保证唯一性。
<div id="header"></div>
- 示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器与ID选择器示例</title>
<style>
.highlight {
color: red; /* 类选择器 */
}
#unique {
color: blue; /* ID选择器 */
}
</style>
</head>
<body>
<p class="highlight">这个段落将会是红色的。</p>
<p class="highlight">这个段落也将是红色的。</p>
<p id="unique">这个段落将会是蓝色的。</p>
</body>
</html>
