CSS属性选择器可以匹配部分属性值。

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《CSS属性选择器能匹配部分属性值吗？》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

CSS支持按属性值部分内容选择元素，通过1、[$=]、[*=]实现：[^=]匹配属性值开头，如a[href^="https"]选中HTTPS链接；[$=]匹配结尾，如a[href$=".pdf"]为PDF文件添加图标；[=]匹配任意位置，如a[href="company.com"]高亮特定邮箱。这些选择器在不修改HTML时非常实用，但需注意避免过度宽泛影响性能与可读性。= ↩

CSS 确实支持根据属性值的部分内容来选择元素，这通过属性选择器中的 ^=、$= 和 *= 实现。它们分别用于匹配属性值的开头、结尾或任意位置的字符串。这种能力在实际开发中非常实用，尤其是在无法修改 HTML 结构但需要针对性地添加样式时。

^= 选择器：匹配属性值开头

使用 [attr^="value"] 可以选择属性值以指定字符串开头的元素。

例如，想给所有链接地址以 "https" 开头的 a 标签添加一个安全标识样式：

a[href^="https"] {
  background: url(lock-icon.png) right center no-repeat;
  padding-right: 20px;
}

这个规则只会作用于 href 属性以 "https" 起始的链接，比如 https://example.com，而不会影响 http:// 或其他协议。

$= 选择器：匹配属性值结尾

[attr$="value"] 用于选择属性值以特定字符串结尾的元素。

常用于文件类型区分。比如，给所有 PDF 链接添加一个图标：

a[href$=".pdf"] {
  background: url(pdf-icon.png) right center no-repeat;
  padding-right: 20px;
}

只要链接以 .pdf 结尾，无论前面路径如何，都会被选中。适用于用户下载页或文档列表。

*= 选择器：匹配属性值包含某字符串

[attr*="value"] 匹配属性值中**任意位置**包含指定字符串的元素。

比如，高亮所有邮箱链接中包含 "company" 的联系人：

a[href*="company.com"] {
  font-weight: bold;
  color: #0056b3;
}

像 mailto:admin@company.com 或 mailto:support_us@sub.company.com 都会被匹配到。

注意：这个选择器比较“宽泛”，容易误匹配，使用时建议结合上下文限制范围。

基本上就这些。^=、$=、*= 让 CSS 能更灵活地应对动态或不可控的属性值场景，合理使用能减少不必要的 class 添加，提升维护效率。不过也要避免过度依赖，保持选择器性能和可读性之间的平衡。

到这里，我们也就讲完了《CSS属性选择器可以匹配部分属性值。》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！