类选择器

类选择器（Class Selector）是CSS中最灵活、最常用的选择器之一。它通过HTML元素的class属性来选择元素，可以为多个不同类型的元素应用相同的样式。

基本语法

类选择器的语法是使用.符号后跟类名：

.class-name {
  property: value;
}

工作原理

类选择器会匹配HTML文档中所有具有指定class属性值的元素。一个元素可以有多个类名（用空格分隔），一个类名也可以被多个元素使用。

使用示例

示例1：为多个元素应用相同样式

<p class="highlight">这是一个高亮段落</p>
<div class="highlight">这是一个高亮区块</div>
<span class="highlight">这是一个高亮文本</span>

.highlight {
  background-color: yellow;
  padding: 5px;
  border-radius: 3px;
}

这段CSS会选择所有带有highlight类的元素，并为它们设置黄色背景、内边距和圆角。

示例2：为元素应用多个类

<div class="container box">这是一个容器盒子</div>

.container {
  width: 90%;
  margin: 0 auto;
}

.box {
  border: 1px solid #ccc;
  padding: 20px;
  background-color: #f5f5f5;
}

这段CSS会选择同时具有container和box类的元素，并为它应用两个类的样式。

示例3：结合元素选择器使用

<h1 class="section-title">主标题</h1>
<h2 class="section-title">副标题</h2>

h1.section-title {
  font-size: 36px;
  color: #333;
}

h2.section-title {
  font-size: 24px;
  color: #666;
}

这段CSS会分别选择带有section-title类的h1和h2元素，并为它们设置不同的样式。

特点

1. 复用性：一个类名可以被多个元素使用，实现样式的复用
2. 灵活性：一个元素可以有多个类名，组合使用不同的样式
3. 中优先级：在CSS选择器优先级中，类选择器的优先级高于元素选择器，但低于ID选择器
4. 语义化：类名可以描述元素的用途或样式，提高代码的可读性

注意事项

1. 命名规范：类名应该具有描述性，使用小写字母和连字符（如main-content），避免使用数字开头
2. 语义优先：类名应该描述元素的含义，而不是样式（如使用btn-primary而不是blue-button）
3. 避免过度使用：不要为每个样式创建一个类，应该合理组织类名，提高复用性
4. 不要滥用!important：避免使用!important来覆盖类选择器的样式，这会导致样式难以维护

浏览器兼容性

类选择器是CSS1规范中定义的选择器，所有现代浏览器都完全支持。

最佳实践

1. 模块化：创建可复用的CSS模块，每个模块对应一个或多个类
2. BEM命名规范：考虑使用BEM（Block-Element-Modifier）命名规范，提高代码的可维护性
3. 单一职责：每个类应该只负责一个样式功能，便于组合使用
4. 避免嵌套过深：尽量保持CSS选择器的简洁，避免过度嵌套

相关资源

• MDN Web Docs - 类选择器
• W3Schools - CSS 类选择器
• BEM 官方文档

学习建议

类选择器是CSS中最常用的选择器，建议初学者重点掌握。在实际项目中，应该优先使用类选择器来定义样式，因为它具有良好的复用性和可维护性。同时，学习合理的类命名规范（如BEM）可以提高代码的可读性和可维护性。