应优先使用.btn而非[class*="btn"]，因后者按子串匹配易误中（如subtle-btn-wrapper），且无法可靠匹配空格分隔的btn primary；.btn由浏览器专为class设计，语义清晰、性能更优、自动规范化空格。
class属性选择器写法本身就不该用[class*="btn"]
HTML 的 class 属性是空格分隔的字符串，不是普通字符串。CSS 规范明确要求：[class*="btn"] 这种写法会按字面子串匹配，比如它会错误匹配 <div class="subtle-btn-wrapper">（因为中间含 <code>"btn"），但反而可能漏掉 <button class="btn primary"></button>——因为实际解析后的 class 值是 "btn primary"，而 "btn" 并非该字符串的连续子串（前面有空格，后面也有空格）。
更关键的是：浏览器对 class 属性的匹配逻辑早已内建了专门机制，.btn 就是为此设计的。你硬用属性选择器绕开它，等于放弃语义、牺牲可读性、引入不可靠行为。
- 永远优先用
.btn代替[class*="btn"] -
[class~="btn"]才是“按空格分隔的单词匹配”，但它仍不如.btn简洁可靠，且兼容性略差 - 若真要动态匹配类名片段（比如 JS 注入的临时类），应由 JS 控制 class 列表，再用标准类选择器
为什么[class*="btn"]在开发者工具里看似生效却没效果
常见假象：你在 Elements 面板里点开一个元素，Styles 面板显示了这条规则，但它被划掉或灰色——说明它被更高特异性规则覆盖了。而你误以为“显示出来 = 生效”。
另一个隐蔽原因：class 属性值在 HTML 源码里带引号，但 JS 动态设置时可能没加引号或混入空格。例如：
- 源码：
<div class="btn btn-lg"> → <code>class属性值是"btn btn-lg" - JS 写错：
el.setAttribute('class', 'btn btn-lg ')→ 末尾多一个空格，某些浏览器解析后不视为合法 class 单词 - 结果：
[class*="btn"]可能匹配到，但.btn不会匹配（因空格问题导致类名未被识别） - HTML 中显式加：
<button data-component="button" data-variant="primary"></button> - CSS 写：
button[data-component="button"][data-variant*="primary"] - 这样语义清晰、可控性强，且不会和 class 解析逻辑打架
此时用 getComputedStyle(el).getPropertyValue('color') 查实际计算值，比看 Styles 面板更真实。
真正需要部分匹配 class 时该怎么写
极少数场景下，你确实需要匹配类名中含某段字符（比如框架生成的哈希类 Button__primary__a1b2c），这时应避免碰 class 属性，改用自定义 data- 属性：
如果必须用 class，且确定目标 class 是完整单词（如 btn-primary），请用 [class~="btn-primary"] 或更稳妥的 .btn-primary ——别用 *。
调试时最容易忽略的一点
在 Elements 面板右键目标元素 →「Edit as HTML」，直接看 class 属性的**原始字符串值**，而不是依赖渲染后的 classList。你会发现很多“看似一样”的 class，在底层其实是 class=" btn primary "（首尾空格）、class="btn primary"（全角空格）、甚至 class="btn primary"（HTML 实体）。这些都会让 [class*="btn"] 行为异常，但 .btn 选择器能自动 normalize 掉。
