用[class*="icon"]可匹配class属性含"icon"子串的元素，但易误选如iconic-btn；更安全的是[class^="icon-"]或[class~="icon"]，后者要求icon为独立类名。
![css如何选中一组相似的类名_结合属性选择器如[class*=\'icon\']模糊匹配](https://img.php.cn/upload/article/000/969/633/177428613725924.jpeg)
class属性值包含'icon'的元素怎么一次性选中
用 [class*="icon"] 就行，但得注意它匹配的是整个 class 属性字符串，不是单个类名。比如 class="btn icon-primary" 会被命中，但 class="icon btn" 同样会被命中——因为属性值里确实含有子串 "icon"。
常见错误是以为它能像 BEM 那样精准识别类名边界，结果把 class="iconic-btn" 或 class="action-icon-wrapper" 也误选进来。
- 只适合类名命名较规范、且 "icon" 不会作为子串意外出现的项目（比如统一前缀
icon-） - 如果想更安全，优先用
[class^="icon-"]（开头匹配）或[class~="icon"]（完整单词匹配，但要求 class 值中真有独立的icon类） -
[class~="icon"]要求空格分隔，class="icon big red"可以，但class="icon-big"不行
为什么[class*='icon']有时不生效
最常踩的坑是 HTML 里写了多个类，但 CSS 选择器权重或拼写没对上。比如 class="ui icon button"，看着有 "icon"，但实际属性值是 "ui icon button"（带空格），[class*="icon"] 依然能匹配——问题往往出在别的地方。
典型原因：
立即学习“前端免费学习笔记（深入）”；
- 大小写敏感：
[class*="Icon"]不会匹配class="icon-close" - 引号不一致：CSS 里必须用英文双引号或单引号，
[class*='icon']没问题，但写成[class*=icon]（无引号）是无效语法 - 样式被更高权重规则覆盖，看起来“没生效”，其实选中了只是没体现
- 元素是 JS 动态插入的，而 CSS 在 DOM 加载时已解析完毕——选择器本身没问题，只是时机问题
和 .icon 这种类选择器比有什么区别
.icon 要求元素显式声明了 class="icon" 或 class="icon other" 这样的完整类名；而 [class*="icon"] 是纯字符串扫描，不管语义。
性能上差别极小，现代浏览器都优化得很好，不用为这点操心。真正影响决策的是维护性：
- 用
.icon更直观、可预测，编辑 HTML 时加类就知道效果 - 用
[class*="icon"]适合 legacy 项目——没法改 HTML，只能靠 CSS “猜”哪些元素该样式化 - 如果团队约定所有图标类都以
icon-开头，[class^="icon-"]比[class*="icon"]更准，也更容易被未来新人理解
要不要用 :is() 包一层来提高兼容性
不用。:is() 是为了简化多组选择器，不是用来兜底属性选择器的。而且 [class*="icon"] 从 IE7 就支持，根本不需要降级。
真正要留意的是某些构建工具（比如旧版 Webpack + css-loader）可能默认启用了 CSS Modules 或作用域限制，导致属性选择器被重命名或失效——这时不是语法问题，是配置问题。
验证方法很简单：打开 DevTools，手动在元素上加一个 class="test-icon"，然后在控制台输 document.querySelector('[class*="icon"]')，看能不能取到。能取到，说明 CSS 写法没问题，问题在别处。
模糊匹配 class 属性看似方便，但代价是语义断裂。越依赖它，越难回答“这个样式到底打算影响哪些元素”。
