属性值包含匹配 选择器 使用 [attr=”value”] 语法，可选中属性值包含指定子 字符串 的元素。例如 a[href=”example”]选中 href 含 ”example” 的链接，img[alt=”logo”]匹配 alt 含 ”logo” 的图片，div[class=”item”]选中 class 含 ”item” 的 div。该选择器适用于动态类名、外部链接和数据属性场景，如为含 ”zhihu.com” 的链接添加图标，高亮 name 含 ”email” 的输入框，或匹配 data-category 含 ”tech” 的元素。注意匹配默认大小写敏感，可用 i 标志忽略大小写，如 [alt*=”LOGO” i]；匹配不要求完整单词，只需子字符串存在。避免过度使用以防性能下降，可与前缀 ^=、后缀 $= 等组合应用。合理使用能提升css 灵活性，减少对额外类名的依赖。
在 CSS 中，属性值包含匹配选择器通过特定语法来选中元素的某个属性值中包含指定字符串的元素。这种选择器属于 属性选择器 的一种，使用起来非常灵活，特别适用于根据属性值的部分内容进行样式控制。
属性值包含匹配语法
属性值包含匹配使用 [attr*=”value”] 语法，表示选中属性 attr 的值中 ** 包含 ** 字符串 value 的所有元素。
基本格式：
例如：
立即学习 “ 前端免费学习笔记（深入）”；
- a[href*=”example”]：选中所有 href 属性包含 “example” 的链接
- img[alt*=”logo“]：选中所有 alt 属性包含 “logo” 的图片
- div[class*=”item”]：选中 class 属性中包含 “item” 的 div 元素
实际应用场景
这种选择器在处理动态类名、外部链接或数据属性时非常有用。
常见用法示例：
/* 给所有跳转到某域名的链接添加图标 */
a[href*=”zhihu.com”]::after {
content: ” ➜”;
color: #0066cc;
}
/ 高亮包含关键词的表单输入框 /
input[name*=”email”] {
border: 2px solid red;
}
/ 匹配自定义数据属性中的部分内容 /
[data-category*=”tech”] {
background-color: #f0f8ff;
}
注意事项与细节
使用属性值包含选择器时需注意以下几点：
- 匹配是大小写敏感的（除非使用 i 标志）
- 只要属性值中存在该子字符串即可匹配，不要求完整单词
- 避免过度使用，可能影响性能，特别是在大量元素上匹配时
- 可与其他 属性选择器 组合使用，如 ^=（前缀）、$=（后缀）等
如果需要忽略大小写，可以这样写：
img[alt*=”LOGO” i] /* “Logo”、”logo” 都能匹配 */
基本上就这些。属性值包含匹配选择器简洁有效，适合在不确定完整属性值但知道关键片段时使用。合理运用能让 CSS 更灵活，减少对额外类名的依赖。
