CSS类选择器[编辑 | 编辑源代码]

CSS类选择器（Class Selector）是CSS中最常用的选择器之一，用于通过HTML元素的`class`属性来选中并应用样式。类选择器以点号（`.`）开头，后跟类名，可以精确控制具有相同类名的多个元素的样式。

基本语法[编辑 | 编辑源代码]

类选择器的基本语法如下：

.class-name {
    property: value;
}

其中：

`.class-name` 是类选择器，`class-name` 是HTML元素的`class`属性值。
`property: value;` 是CSS属性和值的声明。

示例代码[编辑 | 编辑源代码]

以下是一个简单的HTML和CSS示例，展示如何使用类选择器：

<!DOCTYPE html>
<html>
<head>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="highlight">这段文字会被高亮显示。</p>
    <p>这段文字不会被高亮显示。</p>
    <div class="highlight">这个div也会被高亮显示。</div>
</body>
</html>

输出效果：

带有`class="highlight"`的`
`和`
`元素会显示为黄色背景和加粗字体。
没有该类的元素不受影响。

多类选择器[编辑 | 编辑源代码]

一个HTML元素可以拥有多个类名，类名之间用空格分隔。CSS可以通过组合类选择器来选中具有多个类的元素。

示例[编辑 | 编辑源代码]

<p class="highlight important">这段文字同时属于两个类。</p>

.highlight.important {
    color: red;
}

解释：

只有当元素同时具有`highlight`和`important`类时，才会应用红色文本颜色。

类选择器的优先级[编辑 | 编辑源代码]

类选择器的优先级高于元素选择器，但低于ID选择器和内联样式。CSS优先级规则如下：

优先级计算公式： $Specificity = (a, b, c)$ 其中：

`a` = ID选择器的数量
`b` = 类、属性和伪类的数量
`c` = 元素和伪元素的数量

实际应用场景[编辑 | 编辑源代码]

类选择器常用于以下场景： 1. 样式复用：多个元素共享相同的样式。 2. 主题切换：通过修改类名动态改变样式。 3. 组件化开发：在框架（如React、Vue）中为组件添加样式。

案例：按钮样式[编辑 | 编辑源代码]

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-primary {
    background-color: blue;
    color: white;
}

.btn-secondary {
    background-color: gray;
    color: black;
}

效果：

两个按钮共享基础样式（`.btn`），但通过不同的类（`.btn-primary`和`.btn-secondary`）实现不同的颜色。

注意事项[编辑 | 编辑源代码]

1. 类名命名：建议使用语义化的名称（如`.card`、`.header`），避免使用样式描述（如`.red-text`）。 2. 特异性管理：避免过度嵌套类选择器，防止CSS难以维护。 3. 性能：类选择器性能优于属性选择器和复杂选择器。

总结[编辑 | 编辑源代码]

CSS类选择器是样式控制的核心工具之一，具有以下特点：

通过`.`符号定义
可复用性强
支持多类组合
优先级适中

掌握类选择器的使用是CSS学习的重要一步，能够帮助开发者高效地实现页面样式设计。