[class*="icon-"] 会匹配 class 属性中任意位置含 "icon-" 子串的元素，如 "my-icon-text"，而 [class^="icon-"] 仅匹配以 "icon-" 开头的 class 值；真正按单词匹配应使用 [class~="icon-close"]。
为什么 [class*="icon-"] 常被误用但又确实管用
它能快速选中 class="icon-home"、class="icon-user-filled" 这类带前缀的图标元素，但也会意外匹配 class="my-icon-text" 或 class="button-icon-wrapper"——只要字符串里含 icon- 就算数。这不是 bug，是 *= 的设计本意：做子串搜索，不区分单词边界。
[class*="icon-"] 和 [class^="icon-"] 的实际差异
两者都常被用来“选图标”，但行为完全不同：
-
[class*="icon-"]匹配整个class属性值中任意位置出现icon-的元素，比如class="btn icon-primary"、class="icon-secondary disabled"都会被选中 -
[class^="icon-"]只匹配class属性值**以icon-开头**的元素，如class="icon-close"，但会漏掉class="btn icon-close"（因为属性值实际是"btn icon-close"，并不以icon-开头） - 真正想“按类名单词匹配”应该用
[class~="icon-close"]，但它要求完全独立、大小写一致、且必须是空格分隔的完整词
哪些场景下 [class*="icon-"] 是合理选择
当你明确接受宽松匹配，并且 HTML 结构可控时，它反而比写一堆类选择器更省事：
- 项目中所有图标类名都严格以
icon-开头且不会出现在其他 class 中（比如 CMS 不输出含icon-的非图标 class） - 你正在快速 prototype，先统一加颜色/尺寸，后续再精细化
- 搭配
:not()排除干扰项，例如[class*="icon-"]:not([class*="text-icon-"]) - 用于内联 SVG 的
<use href="#icon-home"></use>对应的宿主元素，而宿主 class 确实都带icon-前缀
容易被忽略的兼容性与维护风险
*= 在 IE7+ 完全支持，不是兼容性问题；真正麻烦的是语义漂移：
- 某天设计师加了个
class="card-icon-preview"，样式突然生效，但这个元素本不该有图标样式 - 团队引入 CSS-in-JS 后，生成的 class 变成
Button_icon__abc123，[class*="icon-"]仍会命中，但语义已断裂 - 大小写敏感：
[class*="Icon-"]不会匹配class="icon-home"，而开发者常默认忽略这点 - 空格和换行不影响匹配，但制表符、零宽空格等 Unicode 空白符可能让
class值解析异常，导致看似匹配失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
