编辑“︁CSS类选择器”︁

= CSS类选择器 =

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

== 基本语法 ==
类选择器的基本语法如下：
<syntaxhighlight lang="css">
.class-name {
    property: value;
}
</syntaxhighlight>
其中：
* `.class-name` 是类选择器，`class-name` 是HTML元素的`class`属性值。
* `property: value;` 是CSS属性和值的声明。

== 示例代码 ==
以下是一个简单的HTML和CSS示例，展示如何使用类选择器：
<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>

'''输出效果：'''
* 带有`class="highlight"`的`<p>`和`<div>`元素会显示为黄色背景和加粗字体。
* 没有该类的元素不受影响。

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

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

<syntaxhighlight lang="css">
.highlight.important {
    color: red;
}
</syntaxhighlight>
'''解释：'''
* 只有当元素同时具有`highlight`和`important`类时，才会应用红色文本颜色。

== 类选择器的优先级 ==
类选择器的优先级高于元素选择器，但低于ID选择器和内联样式。CSS优先级规则如下：
<mermaid>
graph LR
    A[内联样式] -->|最高| B[ID选择器]
    B --> C[类选择器]
    C --> D[元素选择器]
    D -->|最低| E[通用选择器]
</mermaid>

优先级计算公式：
<math>
\text{Specificity} = (a, b, c)
</math>
其中：
* `a` = ID选择器的数量
* `b` = 类、属性和伪类的数量
* `c` = 元素和伪元素的数量

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

=== 案例：按钮样式 ===
<syntaxhighlight lang="html">
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
</syntaxhighlight>

<syntaxhighlight lang="css">
.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;
}
</syntaxhighlight>
'''效果：'''
* 两个按钮共享基础样式（`.btn`），但通过不同的类（`.btn-primary`和`.btn-secondary`）实现不同的颜色。

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

== 总结 ==
CSS类选择器是样式控制的核心工具之一，具有以下特点：
* 通过`.`符号定义
* 可复用性强
* 支持多类组合
* 优先级适中

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

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS选择器]]