在编写页面样式时，css伪类和class是最常用的两种选择元素的方式，但它们触发机制完全不同。class由开发者手动写到标签上，伪类则依赖浏览器根据元素状态自动生效。
什么是class
class是html标签上的属性，开发者主动添加，用来对元素分组并施加样式。它完全受人工控制，只有写了对应类名才会生效。
<!-- 手动添加class -->
<button class="btn-primary">提交</button>
<style>
.btn-primary {
background: #3b82f6;
color: #fff;
}
</style>
什么是伪类
伪类以冒号开头，用于选择处于特定状态的元素。它不需要修改html，由用户行为或文档结构触发。
/* 鼠标悬停时触发 */
.btn-primary:hover {
background: #2563eb;
}
/* 输入框获得焦点时触发 */
input:focus {
border-color: #10b981;
}
核心区别对比
| 维度 | class | 伪类 |
|---|---|---|
| 控制方式 | 手动添加类名 | 状态自动匹配 |
| 是否改html | 需要 | 不需要 |
| 常见用途 | 主题、布局、组件类型 | 悬停、聚焦、选中、首尾子元素 |
为什么容易混淆
因为伪类写在css里，看起来和class选择器相似。但:hover这类写法并不是class，而是伪类。函数调用如focus()也只是方法，不等于:focus伪类。
配合使用更合理
- 用class控制基础样式与变体
- 用伪类处理交互反馈
- 避免在html里堆砌状态类
简单示例
<style>
.menu > li {
list-style: none;
}
.menu > li:first-child {
font-weight: bold;
}
.active {
color: red;
}
</style>
<ul class="menu">
<li class="active">首页</li>
<li>文章</li>
</ul>
上面代码中，class="active"是手动标记当前页，而li:first-child由结构自动选中第一个子元素，两者互补。
记住：class是你说它是什么，伪类是它现在是什么。
小结
理解css伪类和class的区别，关键在于看触发来源。class靠人工写入，伪类靠状态驱动。合理分工能让样式更易维护，也减少无意义的html改动。