推荐用[class^="icon-"]精确匹配以"icon-"开头的class属性值，但需注意它匹配整个class字符串开头；更稳妥的是添加统一前缀如btn-icon，再用.btn-icon.icon-search等组合选择器。
想只选中某一类按钮图标，用 [class*="icon"] 会匹配所有含 "icon" 字符串的 class（比如 my-icon-btn、icon-large、action-icon-primary），容易误伤，不够精准。
推荐用属性精确匹配：[class^="icon-"]
如果图标类名统一以 icon- 开头（如 icon-home、icon-close），用开头匹配更安全：
-
[class^="icon-"]—— 只匹配 class 属性值**以 "icon-" 开头**的元素 - 它不会命中
btn-icon或myicon这类不含前缀的类名 - 注意：这个选择器匹配的是整个
class属性字符串的开头，不是单个 class。所以不会被匹配（因为 class 属性值是"btn icon-home"，开头是"btn"）
更稳妥的方式：用 .icon-* 类选择器组合
实际开发中，建议把图标按钮单独加一个统一前缀类（比如 btn-icon），再配合具体图标类：
- HTML：
- CSS：
.btn-icon[class*="icon-"]或更简洁地.btn-icon.icon-search - 这样既语义清晰，又避免属性选择器的歧义和性能小开销
如果必须用属性选择器且支持多类名，可用 [class~="icon-home"]
[class~="icon-home"] 表示匹配 class 属性中**包含完整单词 "icon-home"** 的元素（空格分隔）：
立即学习“前端免费学习笔记（深入）”；
-
✅ 匹配 -
❌ 不匹配（不是独立单词） - 适合已知具体图标类名，且希望严格按 class 单词匹配的场景
基本上就这些。属性选择器有用，但别为了“炫技”牺牲可读性和准确性。优先用语义化类名 + 组合选择器，更稳也更好维护。
