CSS规范将.、#、[、]、:、+、~、>、空格等视为选择器分隔符或逻辑符号，类名或属性值含这些字符必须用反斜杠转义，如.icon.heart、#user:profile、[data-id="s0-1-17-5[2]"]。
SCSS里含特殊字符的类名或属性值，不转义就编译失败或匹配不到——这不是浏览器问题，是CSS语法本身不认。
哪些字符必须转义
CSS规范把 .、#、[、]、:、+、~、>、空格等全当作选择器分隔符或逻辑符号。一旦你写 .btn[data-id="s0-1-17-5[2]"]，浏览器会把 [2] 当成属性选择器的一部分，而不是字符串值。
- HTML中带方括号的 data 属性（如
data-id="s0-1-17-5[2]"）→ CSS 里必须写成[data-id="s0-1-17-5\[2\]"] - 类名含点号（如
class="icon.heart"）→ 不能直接写.icon.heart，得写.icon.heart - ID 含冒号（如
id="user:profile"）→ 必须写成#user:profile，否则被解析成伪类 - 所有转义都用反斜杠
，且反斜杠后必须紧跟被转义字符；若在 SCSS 字符串里拼接，记得双写："\["
:deep() 里嵌套特殊字符更易出错
Vue 的 :deep() 是伪选择器，它内部的 CSS 仍要遵守原生规则。比如想穿透改 el-input__inner 里带方括号的子元素：:deep(.el-input__inner[data-v-123456[active]]) 会直接失效。
- 先确认 HTML 实际渲染的属性值是否真带
[和]（用 DevTools → Edit as HTML 看） - 若值固定，优先用引号包裹：
:deep(.el-input__inner[data-v-123456="active"]) - 若值动态生成且含不可控字符，放弃属性选择器，改用
:deep(.el-input__inner).active这类 class 匹配 - SCSS 变量插值时别漏掉转义：
$attr: "data-id"; :deep([#{$attr}="s0-1-17-5\[2\]"]) { ... }
SCSS 编译期 vs 运行期：& 不处理转义
& 是纯字符串拼接，它不会帮你加反斜杠。写 .user:profile { &:hover { ... } }，编译后是 .user:profile:hover，但如果你写成 .user:profile { &:hover { ... } }，Sass 就报错：Invalid CSS after ".user:" —— 它把 :profile 当成伪类了。
立即学习“前端免费学习笔记（深入）”；
-
&前的选择器本身就得合法，不能靠它“补救” - 含特殊字符的父类名，必须在定义时就转义：
.icon.plus { &:before { content: "+" } } - 嵌套中用插值拼接类名时，确保变量内容已转义：
$name: "user\:profile"; .#{$name} { ... } - 别依赖
@import外部未转义的 SCSS 片段——导入即编译，错误会静默吞掉整块样式
最常被忽略的是：开发者工具里看到的“匹配到的元素”，未必是你写的那条规则生效的——可能只是其他同名类或全局样式覆盖了。验证前先清空浏览器缓存，再检查 Elements 面板里该元素最终计算出的 Computed 样式来源。
