使用Prettier可可靠格式化CSS伪类。安装Prettier插件并设为默认工具，避免冒号前后加空格或使用冲突插件。Prettier会正确处理:hover、:focus、::before等语法，保持标准写法。配合Stylelint校验规则，通过Shift+Alt+F快捷键一键格式化，确保代码风格统一美观。
VSCode 默认的格式化工具（如内置的 CSS 格式化器或通过 Prettier）在处理伪类选择器（如 :hover、:focus、::before 等）时，通常不会破坏语法，但有时格式化结果可能不符合你的代码风格偏好。想要更好地格式化伪类选择器，关键是配置合适的格式化工具和规则。
使用 Prettier 统一格式化 CSS 伪类
推荐使用 Prettier 作为 VSCode 中的 CSS 格式化工具，它对现代 CSS 语法（包括伪类和伪元素）支持良好。
安装与配置步骤：- 在 VSCode 扩展市场中搜索并安装 Prettier - Code formatter
- 确保将 Prettier 设置为默认格式化工具：
右键编辑器 → “格式化文档” → 选择 “Prettier” - 创建
.prettierrc文件来自定义格式化规则（可选）
Prettier 默认会保留伪类选择器的写法，例如：
.btn:hover {
color: red;
}
.sidebar:focus-within::before {
content: '';
display: block;
}
不会错误地在冒号前后添加空格或换行，符合标准 CSS 写法。
立即学习“前端免费学习笔记（深入）”；
避免格式化器错误拆分伪类
某些不规范的格式化配置可能会导致 :hover 被拆成 : hover，这会破坏样式。确保：
- 不要手动在伪类冒号后加空格
- 禁用其他冲突的 CSS 格式化插件（如旧版 Beautify）
- 使用标准语言模式：将文件设置为 CSS** 或 SCSS，而非纯文本
自定义格式化规则（适用于 SCSS/Sass/Less）
如果你在使用预处理器，可以结合 Stylelint + Prettier 实现更精细控制。
建议配置：
- 安装 Stylelint 并启用
selector-pseudo-class-case-insensitive等规则 - 在
.stylelintrc中避免强制修改伪类结构 - 让 Prettier 处理格式，Stylelint 只做校验
例如，保持以下写法整洁：
a:where(.active):hover::after {
opacity: 1;
}
Prettier 会正确识别嵌套伪类，不会误格式化。
快捷键快速格式化伪类区块
选中包含伪类的 CSS 代码块，使用默认快捷键：
- Windows/Linux: Shift + Alt + F
- macOS: Shift + Option + F
即可一键格式化，确保伪类与其他规则对齐、缩进一致。
基本上就这些。只要用好 Prettier，VSCode 对 :hover 等伪类选择器的格式化是可靠且美观的，无需额外技巧。重点是统一工具链，避免插件冲突。
