CSS Id 和 Class 选择器 ¶

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 “class"选择器。

id 选择器 ¶

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=“para1”:

1#para1 {
2    text-align: center;
3    color: red;
4}

注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

ID 选择器的特点 ¶

1. 唯一性 - 每个ID在一个HTML文档中必须是唯一的
2. 高优先级 - ID选择器比类选择器有更高的优先级
3. JavaScript引用 - 可以通过JavaScript直接使用getElementById()访问

class 选择器 ¶

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.“号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

1.center {
2    text-align: center;
3}

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

1p.center {
2    text-align: center;
3}

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

Class 选择器的特点 ¶

1. 可重用性 - 多个HTML元素可以使用同一个class
2. 多类组合 - 一个元素可以同时拥有多个class，用空格分隔
3. 灵活性 - 比ID选择器更灵活，适合样式重用

ID与Class选择器的区别 ¶

最佳实践 ¶

• 使用ID选择器 - 用于页面中唯一的元素，如页头、页脚、主导航等
• 使用Class选择器 - 用于可能重复的元素样式，如按钮、卡片、文本样式等
• 命名规范 - 使用有意义的、描述性的名称，避免使用拼写错误
• 避免过度使用ID - 滥用ID选择器会导致样式难以重用和维护

1<!-- 使用ID的例子 -->
2<div id="header">
3    <h1>网站标题</h1>
4</div>
5
6<!-- 使用Class的例子 -->
7<button class="btn btn-primary">提交</button>
8<button class="btn btn-secondary">取消</button>

通过合理使用ID和Class选择器，可以创建结构良好、易于维护的CSS代码。