[class*="str"]易误匹配因class是空格分隔的多值字符串，*=仅做子串匹配不识别单词边界；应优先用[class~="str"]匹配独立类、[class^="str"]匹配开头类，或改用语义清晰的data-属性。
直接用 [class*="str"] 能批量选中类名里含 str 的元素，但极易误匹配——比如想选 btn-primary，结果把 my-btn-text 也套进去了。
为什么 [class*="str"] 容易出错
因为 class 属性值是空格分隔的多值字符串，而 *= 是纯子串匹配，不识别单词边界。它把整个 class="a-b c-str d" 当成一个长字符串去搜 "str"，只要中间连续出现就命中。
-
[class*="btn"]会匹配class="button"、class="sub-btn-active"、class="not-a-btn-wrapper" - HTML 中 class 顺序不可控（尤其 SSR 或第三方组件），
[class*="lvl1"]可能意外捕获class="level-lvl10" - 无法区分
icon是独立类还是嵌在别的词里（iconic、notification-icon都中招）
更安全的替代写法
优先按语义和可控性选方案，而不是图省事写一个通配：
- 要匹配「以
str开头的独立类」→ 用[class^="str"]，但需确保该类一定在空格前（如class="str-1 btn"可，class="btn str-1"不行） - 要匹配「
str是完整独立类」→ 用[class~="str"]，它只认空格分隔的单词，class="a str b"中的str才算数 - 要匹配「以
-str结尾的类」→ 把 class 放到属性末尾（class="a b c-str"），再用[class$="-str"]；否则得靠 JS 拆解className.split(" ").includes("str")
真正适合 *= 的场景
别硬套在 class 上，转去用在语义清晰、命名受控的 data- 属性上：
-
[data-role*="modal"]→ 匹配data-role="confirm-modal"、data-role="toast-modal-close" -
[data-status*="error"]→ 比[data-status="error"]更宽松，又比 class 上乱用*=安全得多 - 所有现代浏览器都支持，性能无损耗，但前提是 value 是静态字符串，不带正则或大小写忽略
真正难的不是写对选择器，而是判断这个「特定字符」是否真的适合作为 class 的模糊锚点——如果命名本身没收敛、没分层、没预留语义空间，*= 只会让样式越来越难维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
