伪类和class的核心区别在于：class是开发者主动添加的静态标识，伪类是浏览器根据元素状态自动匹配的动态条件；class可复用、可编程控制、语义明确，伪类不可手动添加、依赖上下文、反映实时状态。
伪类和 class 的核心区别在于：class 是开发者主动加上的静态标识，而伪类是浏览器根据元素当前状态自动匹配的动态条件。
class 是你“亲手贴上的标签”
class 属性写在 HTML 里，比如 ，它不会自己变。你加了，它就在；你删了，它就消失。样式靠 CSS 中 .btn-primary 这类选择器绑定，不依赖用户行为或 DOM 变化。
- 可复用：多个元素可以共用同一个 class
- 可编程控制：JavaScript 能随时
element.classList.add()或remove() - 语义明确：通常反映组件类型、功能或设计角色（如
.error、.hidden）
伪类是浏览器“自动识别的状态快照”
伪类不靠 HTML 标签声明，而是由浏览器实时判断元素是否满足某种条件。比如 a:hover 不需要你在 a 标签上写 hover="true" —— 鼠标移上去那一刻，浏览器就自动启用这个样式；鼠标一走，样式立刻撤回。
- 不可手动添加：你不能用 JS 给元素“设置 :hover”，只能模拟交互（如强制 focus）来触发部分伪类
- 依赖上下文：像
:first-child会随兄弟节点增减而动态生效或失效 - 常见场景包括交互（
:hover、:focus）、结构（:nth-child）、表单状态（:checked、:disabled）等
它们可以一起用，但角色不重叠
一个按钮既能有 class 控制基础样式，也能用伪类响应操作：
立即学习“前端免费学习笔记（深入）”；
.submit-btn {
background: #007bff;
}
.submit-btn:hover {
background: #0056b3;
}
.submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
这里 .submit-btn 定义常态，:hover 和 :disabled 分别接管两种独立状态——class 不负责“什么时候变”，伪类也不负责“基础长什么样”。
容易混淆的边界点
有些伪类看起来像 class，比如 :checked。但它不是因为你写了 class="checked" 才生效，而是浏览器检测到真实的 checkbox 元素被用户勾选或通过 JS 设置了 checked 属性后才触发。同理，:valid 和 :invalid 依据的是表单验证结果，不是 class 名字。
本质上，class 是“你说它是啥”，伪类是“浏览器说它现在是啥”。
