postcss-modules不重写伪类本身，仅对选择器主体（如类名）哈希化，故.button:hover编译为.button_abc123:hover仍可正常工作；但需避免空格误写、确保:global()包裹完整选择器，且调试时优先验证DOM类名与样式规则匹配性。
PostCSS 本身不直接处理伪类选择器的语义，但配合 postcss-modules 使用时，伪类（如 :hover、:focus）能否正常工作，取决于你是否正确隔离了局部作用域与全局行为。关键不是“让伪类生效”，而是避免因模块化导致伪类绑定失效或类名混淆。
postcss-modules 默认不干扰伪类，但会重写选择器主体
postcss-modules 只对类名（.xxx）、ID（#xxx）和属性选择器（[class~="xxx"]）做作用域哈希，**不会重写伪类本身**（如 :hover、:active）。这意味着：
- 像
.button:hover这样的写法，会被转为类似.button_abc123:hover—— 伪类保留，主体类名被作用域化，完全可用 - 但
:global(.btn):hover或:local(.btn):hover这类显式作用域声明，必须成对出现，否则:local()会被当作无效语法忽略 - 如果误写成
.button :hover（带空格），就变成了后代选择器，匹配的是 `.button` 内部某个元素的 hover 状态，而非按钮自身 —— 这是常见拼写错误，和模块化无关，但容易在调试时归错因
需要显式支持 :global() 的场景
当伪类用于全局第三方组件（比如 Ant Design 的 .ant-btn:hover），或你想复用未模块化的 CSS 片段时，必须用 :global() 包裹整个选择器，否则 postcss-modules 会尝试作用域化它并失败：
/* ❌ 错误：没声明 global，.third-party-btn 被哈希，但第三方库没这个类 */
.third-party-btn:hover { color: red; }
<p>/<em> ✅ 正确：明确告诉 postcss-modules 这是全局选择器 </em>/
:global(.third-party-btn:hover) { color: red; }</p><p>/<em> ✅ 也支持嵌套写法（需插件支持 localsConvention + 嵌套语法） </em>/
:global(.third-party-btn) {
&:hover { color: red; }
}注意：:global() 必须包裹**整个选择器**，不能只包类名，否则伪类仍会被当作局部作用域的一部分处理。
立即学习“前端免费学习笔记（深入）”；
与 postcss-preset-env（原 cssnext）共用时的兼容性陷阱
如果你同时用了 postcss-preset-env（用于 :is()、:where() 等新伪类），要留意两点：
-
postcss-preset-env会在postcss-modules之前运行，所以像:is(.a, .b):hover这种写法，会被先转译成兼容语法，再交给postcss-modules作用域化 —— 多数情况没问题 - 但
:is(:global(.a), .b):hover这种混用会出问题：:global()在:is()内部不被识别，整个选择器可能被丢弃。应拆分为独立规则 - 旧版
postcss-cssnext已废弃，若项目还在用，务必升级到postcss-preset-env，否则:focus-visible等现代伪类无法降级，且与模块化插件存在解析顺序冲突
调试伪类失效的三步定位法
当发现 .my-button:hover 没反应，别急着查 PostCSS 配置，按顺序排查：
- 打开 DevTools → Elements 面板，确认渲染出的 class 名确实是哈希后的（如
my-button_xyz789），且该类名出现在元素上 - 检查 Styles 面板中，对应规则是否被划掉（表示优先级被覆盖），常见于全局重置样式（如
a:hover）或更高优先级选择器（如#app .my-button:hover） - 执行
getComputedStyle(document.querySelector('.my-button_xyz789'), ':hover')—— 如果返回空对象，说明浏览器根本没解析该伪类规则，大概率是选择器写法错误（比如漏了冒号、多写了空格）或:global()位置不对
真正棘手的从来不是配置，而是伪类本身依赖 DOM 状态和浏览器渲染逻辑 —— 模块化只是加了一层命名转换，它既不创造也不销毁伪类语义，但会让错误更难一眼发现。
