[href="example"]会误匹配邮箱链接，因为=是纯字符串包含匹配，不区分语义位置，如mailto:support@example.com和https://example.com/contact均被选中，实际应优先用[href^="https://example.com"]或href^="https://"组合。
为什么 [href*="example"] 会误匹配邮箱链接？
因为 *= 是纯字符串包含匹配，不区分语义位置。比如 mailto:support@example.com 和 https://example.com/contact 都会被 a[href*="example"] 选中——但前者是邮箱协议，后者才是网站域名。
常见错误是拿它当“域名匹配”用。实际应优先考虑 [href^="https://example.com"] 或更稳妥的 [href^="https://"][href*="example.com"]（注意：这是两个独立条件，要求同一 href 同时满足）。
- 避免宽泛匹配：除非明确需要泛化处理（如统一高亮所有含 “admin” 的 data-role），否则不用
*= - 加前缀限制范围：比如
form[action*="api/"]比[action*="api"]更安全 - 注意引号内空格：值里有空格必须加引号，
[data-id*="123 456"]不能写成[data-id*="123 456"]（已带引号，此处仅强调格式）
[class^="btn-"] 真的能匹配 class="btn-primary btn-lg" 吗？
能，但原理不是“类名以 btn- 开头”，而是把整个 class 属性值当作一个字符串看待："btn-primary btn-lg" 确实以 "btn-" 开头。
这容易让人误以为它像 BEM 那样按单词切分，其实不是。所以 [class^="btn-"] 也会匹配 class="btn-primary-extra"，但不会匹配 class="primary btn"（字符串开头是 "primary"）。
- 想匹配独立单词？改用
[class~="btn"]，它只认空格分隔的完整词 - 大小写敏感：写成
[class^="Btn-"]就选不中class="btn-primary"，加i标志可忽略：[class^="btn-" i] - 性能上比
.btn-primary慢，高频渲染区域慎用
[src$=".webp"] 为什么有时不生效？
因为 $= 只看属性值**结尾字符**，不解析路径或查询参数。如果 src 是 "logo.webp?v=1"，结尾是 "1"，不是 ".webp"，自然不匹配。
常见场景是动态构建 URL 或服务端注入缓存参数，导致真实值末尾被污染。
- 检查实际 HTML：右键审查元素，复制
src值粘贴到编辑器末尾确认 - 服务器端控制输出时，确保静态资源 URL 不带查询参数；若必须带，改用
[src*=".webp"]并接受一定误匹配 - 对图片格式做兜底处理：用
img[src$=".webp"], img[src$=".png"], img[src$=".jpg"]组合声明，避免单点失效
如何让 [type="submit"] 同时匹配大写和小写？
直接加 i 标志：input[type="submit" i]。现代浏览器（Chrome 63+、Firefox 61+、Safari 11.1+）都支持，且只对 ASCII 字母有效。
这个标志必须紧贴在引号内值之后、右括号之前，不能写成 input[type="submit" i ]（空格不行）或 input[type="submit"i]（没空格也不行）。
- HTML 属性本身不区分大小写，但 CSS 选择器默认严格匹配字面量
-
i对非 ASCII 字符（如中文、日文）无效，别指望[data-lang="中文" i]能匹配大小写变体 - 如果需兼容 IE11，它不支持
i，只能靠 JS 预处理或约定服务端统一小写输出
实际使用时，最易被忽略的是属性值里的隐藏空格和换行符——尤其来自模板引擎或 JS 动态拼接时，肉眼不可见，却足以让 [attr="value"] 失效。调试时先复制属性值到代码编辑器里看真实长度，比反复改 CSS 更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
