[class*="icon-"]常“选多了”是因为它匹配class属性值中任意位置含"icon-"子串的元素，不区分单词边界，如"btn-icon-primary"或"iconic-btn"也会被误选。
[class*="icon-"] 能匹配到含 icon- 子串的 class 属性值，但**它不区分单词边界，容易误选**——比如 class="btn-icon-primary" 或 class="action-icon" 也会被命中，实际开发中往往不是你想要的。
为什么 [class*="icon-"] 常常“选多了”
这个选择器匹配的是整个 class 属性字符串是否包含 "icon-" 这个子串，而不是“是否含有独立的 icon- 开头的类名”。
-
<button class="btn icon-home"></button>→ ✅ 匹配（属性值是"btn icon-home"，含"icon-"） -
<button class="iconic-btn"></button>→ ✅ 也匹配（含子串"icon"，虽然没连字符，但如果你写的是[class*="icon"]就更糟） -
<button class="ui icon-close primary"></button>→ ✅ 匹配（空格不影响子串查找） -
<button class="icon-close-lg"></button>→ ✅ 匹配（"icon-close-lg"含"icon-"）
问题不在语法错，而在语义失控：你本想控制图标类，结果把命名含 icon 的布局类、状态类甚至第三方组件类一并卷进来了。
更稳妥的替代方案：[class^="icon-"] 和 [class~="icon-home"]
优先按使用场景选：
- 如果所有图标类都**统一以
icon-开头且独占 class 属性首位**（如class="icon-home"），用[class^="icon-"]—— 它只认属性值开头是"icon-"的元素，class="btn icon-home"❌ 不匹配（开头是"btn"） - 如果图标类总是**作为独立单词出现**（如
class="btn icon-search large"），用[class~="icon-search"]—— 它要求"icon-search"是空格分隔的完整单词，class="icon-search-lg"❌ 不匹配 - 若需兼顾多类名 + 精确命中，最稳做法是加一个统一容器类，比如
class="btn-icon icon-search"，再写.btn-icon.icon-search—— 权重可控、语义清晰、无歧义
实际写法要注意的细节
几个容易踩的坑，直接决定样式生效与否：
- 引号必须是英文单/双引号：
[class*="icon-"]✔️，[class*=icon-]❌（无引号是无效语法） - 大小写敏感：
[class*="Icon-"]不会匹配class="icon-home" - 权重只有 10，容易被
.btn .icon（后代选择器，权重 20）或内联 style 覆盖，调试时先检查 computed styles 确认是否真被选中 - 不要在 class 名里混用连字符和下划线（如
icon_home），否则[class*="icon-"]对它完全无效
真正需要批量控制图标样式时，靠属性选择器兜底不如从 HTML 结构入手：统一加前缀类、避免多义命名、必要时用 data 属性辅助（如 data-icon）。CSS 选择器不是正则引擎，越想“模糊匹配”，越容易在维护时付出额外成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
