用[class*="icon"]可匹配class属性含"icon"子串的元素，但易误选如iconic-btn；更安全的是[class^="icon-"]或[class~="icon"]，后者要求icon为独立类名。

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"] 是纯字符串扫描，不管语义。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

性能上差别极小，现代浏览器都优化得很好，不用为这点操心。真正影响决策的是维护性：

• 用 .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 属性看似方便，但代价是语义断裂。越依赖它，越难回答“这个样式到底打算影响哪些元素”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！