类选择器通过class属性实现样式复用，提升代码可维护性；以.开头定义，支持多类名组合与BEM命名规范；结合JavaScript的classList可动态控制样式，增强交互性。
CSS类选择器是前端开发中最常用的选择器之一，它通过为HTML元素添加class属性，实现样式复用与灵活控制。掌握类选择器的使用技巧，能显著提升代码可维护性和开发效率。
基础语法：如何定义和使用类选择器
类选择器以.（点）开头，后接类名，用于匹配具有对应class属性的HTML元素。
例如：
HTML:
立即学习“前端免费学习笔记（深入）”；
<div class="highlight">重要信息</div> <p class="highlight small-text">小号高亮文字</p>
CSS:
.highlight {
background-color: yellow;
}
.small-text {
font-size: 12px;
}
上述代码中，两个元素都应用了highlight类，因此都会拥有黄色背景。类名之间用空格分隔，支持一个元素应用多个类。
提高选择精度：组合类选择器
当需要更精确地控制样式时，可以组合多个类来定义选择器。
例如：
.btn.primary {
background-color: blue;
color: white;
}
这个规则只会作用于同时包含btn和primary两个类的元素：
<button class="btn primary">确认</button>
注意：.btn.primary中间没有空格，表示“同时拥有”；若写成.btn .primary（带空格），则表示后代元素，语义完全不同。
避免命名冲突：采用BEM命名规范
随着项目增大，类名容易重复或产生冲突。推荐使用BEM（Block Element Modifier）命名法，提升可读性与可维护性。
-
Block：独立功能模块，如
card -
Element：属于模块的子元素，如
card__title -
Modifier：状态或变体，如
card--featured
示例：
<article class="card card--featured"> <h2 class="card__title">新闻标题</h2> <p class="card__content">内容文本</p> </article>
对应的CSS：
.card { border: 1px solid #ccc; }
.card--featured { border-color: red; }
.card__title { font-weight: bold; }
这种命名方式清晰表达了结构关系，减少样式覆盖风险。
实战技巧：动态类操作与JavaScript结合
类选择器常与JavaScript配合，实现交互效果。通过classList方法可动态增删类。
例如，点击按钮切换高亮状态：
<div id="box" class="box">点击我</div> <button onclick="toggle()">切换样式</button>
.active {
background-color: green;
color: white;
}
function toggle() {
const box = document.getElementById('box');
box.classList.toggle('active');
}
利用classList.add、remove、toggle等方法，能轻松实现显示隐藏、主题切换等功能。
基本上就这些。类选择器看似简单，但合理使用能极大提升开发效率和项目质量。关键是命名规范、精准选择、灵活组合。
