在CSS的各类选择器中，类选择符是应用频率极高的一种，它的核心作用是为具有相同类名的HTML元素统一设置样式，实现样式代码的复用。那么css中类选择符用什么表示呢？类选择符的核心标识是英文句点.，后面紧跟对应的类名即可完成定义。
类选择符的基础语法
类选择符的语法结构非常简单，由句点、类名和样式声明块三部分组成，具体格式如下：
/* 类选择符语法：.类名 { 样式属性: 属性值; } */
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
上面的代码中，.box就是类选择符，它会匹配所有class属性值为box的HTML元素，并为这些元素应用大括号内定义的样式。
类选择符的使用规则
使用类选择符时需要注意以下几个核心规则：
- 类名在HTML的
class属性中定义，同一个类名可以应用在多个不同的HTML元素上，这也是类选择符复用性的体现。 - 一个HTML元素可以同时拥有多个类名，多个类名之间用空格分隔，此时该元素会同时匹配所有对应类名的类选择符样式。
- 类名命名需要符合规范，不能以数字开头，建议采用语义化的命名方式，比如
header、nav-item等，方便后续代码维护。 - 类选择符的优先级高于元素选择符，低于ID选择符，当多个选择器同时作用于同一个元素时，会按照优先级规则应用样式。
类选择符的使用示例
下面通过一个完整的HTML和CSS示例来展示类选择符的实际应用效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>类选择符示例</title>
<style>
/* 定义类选择符 */
.text-red {
color: #ff0000;
font-weight: bold;
}
.bg-blue {
background-color: #e6f7ff;
padding: 10px;
}
.border-round {
border-radius: 8px;
border: 1px solid #91d5ff;
}
</style>
</head>
<body>
<!-- 单个类名的元素 -->
<p class="text-red">这段文字会显示为红色加粗</p>
<!-- 多个类名的元素 -->
<div class="bg-blue border-round">
这个div同时应用了蓝色背景和圆角边框样式
</div>
<!-- 多个相同类名的元素 -->
<ul>
<li class="text-red">列表项1</li>
<li>列表项2</li>
<li class="text-red">列表项3</li>
</ul>
</body>
</html>
在上面的示例中，text-red类选择符被应用到了两个p元素和两个li元素上，这些元素都会显示红色加粗文字；bg-blue和border-round两个类同时应用到了同一个div元素上，该元素会同时拥有两种样式效果。
类选择符的常见应用场景
类选择符在实际开发中的应用非常广泛，常见的场景包括：
- 统一样式复用：比如页面中多个按钮需要相同的样式，只需要定义一个
btn类选择符，所有按钮添加class="btn"即可。 - 状态样式控制：比如给激活状态的导航项添加
active类，通过.active类选择符设置激活样式。 - 组件样式定义：在组件化开发中，每个组件的基础样式都可以通过类选择符定义，避免样式冲突。
类选择符与ID选择符的区别
很多开发者会混淆类选择符和ID选择符，两者的核心区别如下：
| 对比项 | 类选择符 | ID选择符 |
|---|---|---|
| 表示符号 | 英文句点. | 井号# |
| 复用性 | 可以多次使用，同一个类名可应用于多个元素 | 唯一使用，同一个ID值只能在页面中出现一次 |
| 优先级 | 优先级低于ID选择符 | 优先级高于类选择符 |
| 适用场景 | 通用样式、可复用样式 | 唯一元素样式、锚点定位 |
总结来说，css中类选择符用.加上类名的方式表示，它是CSS开发中实现样式复用的重要工具，掌握类选择符的使用方法对于前端样式开发来说至关重要。