CSS属性选择器支持部分值匹配，可灵活定位元素；2. 使用[attr*="value"]匹配包含指定文本的属性值，适用于邮箱链接等场景；3. [attr^="value"]选择以特定字符串开头的属性，常用于区分外部链接；4. [attr$="value"]选择以特定后缀结尾的属性，适合文件类型识别；5. [attr~="value"]匹配空格分隔的独立单词，[attr|="value"]匹配连字符分隔的值，适用于多值属性；6. 合理使用可减少类名冗余，提升可维护性，但需注意性能和大小写敏感问题。
在CSS中，属性选择器不仅能匹配完整属性值，还能根据部分值灵活定位元素。这种能力特别适合处理动态类名、链接类型或语言属性等场景。掌握部分值匹配技巧，能让你更高效地控制页面样式。
匹配属性值包含指定文本
使用 [attr*="value"] 可以选择属性值中包含特定字符串的元素。比如，要给所有邮箱链接添加图标：a[href*="mailto"] { padding-left: 20px; background: url(email-icon.png) left center no-repeat; }
这个选择器会匹配任意包含 "mailto" 的 href 属性，适用于各种邮箱地址。匹配以特定值开头的属性
用 [attr^="value"] 匹配属性值以某字符串开头的元素。常用于外部链接样式区分：a[href^="https://"] { color: #0066cc; }
img[src^="/uploads/"] { border: 1px solid #ddd; }
立即学习“前端免费学习笔记（深入）”；
第一个规则只作用于 HTTPS 链接，第二个则针对上传目录下的图片统一加边框。匹配以特定值结尾的属性
使用 [attr$="value"] 来选择属性值以某后缀结束的元素。非常适合文件类型识别：a[href$=".pdf"] { background: url(pdf-icon.png) right center no-repeat; padding-right: 20px; }
img[src$=".webp"] { image-rendering: -webkit-optimize-contrast; }
PDF 文件链接自动显示图标，WebP 图片应用特定渲染方式，无需额外类名。处理多值属性中的单个值
当属性包含多个空格或连字符分隔的值时，可用 [attr~="value"] 或 [attr|="value"]：span[lang~="en"] { font-family: Arial, sans-serif; }
div[class|="btn"] { display: inline-block; padding: 8px 12px; }
波浪号 ~ 用于空格分隔的值列表中匹配独立单词；竖线 | 匹配以指定值开始且后跟连字符的值，适合 BEM 类名体系。基本上就这些常用的部分值匹配方法。合理运用它们可以减少HTML中冗余的类名，提升样式的可维护性。注意性能影响，避免过度嵌套或复杂组合，特别是在大型页面中。不复杂但容易忽略的是，这些选择器对大小写敏感，必要时需配合 text-transform 或调整匹配策略。
