SCSS中.user:profile报错是因为编译器将:误解析为伪类起始符，正确解法是用#{"user:profile"}字符串插值绕过解析，避免使用:或嵌套&。
SCSS 里写 .user:profile 直接报错？别硬拼，用字符串插值
SCSS 编译器会把冒号当伪类解析，.user:profile 被当成「类名 .user 后跟伪类 :profile」，但 :profile 不是标准伪类，直接抛 Invalid CSS after ".user:"。它不是不支持冒号，而是解析阶段就卡死——根本没机会转义。
正确做法是绕过选择器解析，用 #{} 插值输出原始字符串：
.user:profile {
// 注意：这里不能写 &:hover 这类嵌套，否则又触发解析
color: blue;
}
// 或更稳妥的写法（推荐）
#{"user:profile"} {
color: red;
}
- 插值内容必须是合法 CSS 片段，
user:profile是合法标识符（CSS 允许 ID/类名含冒号，只要转义或引起来） - 避免在插值块内使用
&嵌套，否则 SCSS 仍会尝试解析父选择器结构 -
:在 SCSS 中无效——编译器在解析时已报错，根本不会处理反斜杠
Less 中 . 为啥没反应？先确保它是单个标识符
Less 的转义不是“贴个反斜杠就完事”。它要求转义后的结果能被识别为一个完整的、语法合法的标识符。比如 .foo.bar 会被解析成两个类名，.foo.bar 依然被拆开，转义失效。
真正起作用的写法只有两种：
立即学习“前端免费学习笔记（深入）”；
- 用
~".foo.bar"字符串插值，原样输出（推荐） - 把整个选择器写成单个标识符形式，如
.foo.bar→ 实际需满足 CSS 规范：点号前必须有非空内容，且不能连续出现未转义的点
错误示例：.foo.bar 在 Less 中大概率静默失败，因为解析器看到 .foo 就停了，后面 .bar 被丢弃。
document.querySelector() 找 id="user:profile" 怎么写？双重转义躲不开
JavaScript 字符串和 CSS 选择器各吃一层反斜杠，所以 : 得写成 \:：
const el = document.querySelector('#user\:profile');
常见错误：
- 只写
:→ JS 字符串里:不合法，报 SyntaxError - 写
":"直接拼 →#user:profile被当成 ID + 伪类，找不到元素 - 用模板字符串却忘了双反斜杠：
`#user:${id}`错，应为`#user\:${id}`
所有非字母数字字符（.、/、[、]、+ 等）都适用同一规则：JS 层要 \，CSS 层收一个 。
CSS 文件里直接写 .a.b 可以吗？可以，但浏览器兼容性要看清
原生 CSS 支持 转义，.a.b 理论上等价于 .a.b，但实际行为受浏览器解析器影响：
- Chrome / Firefox 支持良好，
.a.b匹配 class="a.b" - 旧版 Safari（≤15.4）对连续转义或 Unicode 转义支持不稳定
-
.必须紧贴前字符，不能有空格：.a . b是错的，.a.b才对
更稳妥的做法是改用属性选择器：[class="a.b"]，完全规避转义问题，且语义清晰、兼容性拉满。
真正容易被忽略的是：转义不是万能胶。它解决的是“让非法字符串变合法”，但前提是目标环境（预处理器、JS 引擎、浏览器）各自按自己规则吃掉那层 。漏一层，就断在半路。
