首页 > 文章 > 前端

CSS属性选择器$=用法详解

时间：2026-01-03 20:30:52 209浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《CSS 属性选择器中，$= 用于选择属性值以指定字符串结尾的元素。例如，[href$=".pdf"] 会匹配所有 href 属性以 .pdf 结尾的链接。实例说明：PDF 报告图片 Excel 文件/* 匹配所有以 .pdf 结尾的链接 */ a[href$=".pdf"] { color: red; }在这个例子中，只有第一个标签会被样式选中并显示为红色。》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

attr$="value" 是 CSS 后缀匹配属性选择器，仅匹配属性完整值以指定字符串结尾的元素，不支持子串、正则，且默认不区分大小写。

css 属性选择器 $= 如何使用_后缀匹配实例说明

什么是 `attr$="value"` 属性选择器

这是 CSS 属性选择器中用于「后缀匹配」的语法，表示匹配属性值以指定字符串结尾的元素。注意：它只对属性的**完整值**做结尾判断，不支持子串或正则，也不区分大小写（除非加 [attr$="Value" i]）。

`href$=".pdf"` 匹配 PDF 链接的实际写法

常见需求是给所有 PDF 下载链接加图标或统一样式。关键点在于：必须确保 href 属性值**确实以 .pdf 结尾**，而不是中间出现或带查询参数。

✅ 匹配：、

❌ 不匹配：（因为实际值是 report.pdf?ts=123，结尾不是 .pdf）

❌ 不匹配：（结尾是 #section2）

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

处理带查询参数的 URL：先用 JS 补全再匹配

CSS 本身无法解析 URL 参数，所以 href$=".pdf" 对 file.pdf?x=1 失效。可行解是用 JS 提前标准化属性：

读取原 href 值，用 URL 构造函数提取 pathname
把干净的路径写回自定义属性，如 data-ext
再用 [data-ext$=".pdf"] 精确匹配

document.querySelectorAll('a[href]').forEach(el => {
  try {
    const url = new URL(el.href, location.origin);
    const ext = url.pathname.split('.').pop().toLowerCase();
    el.setAttribute('data-ext', `.${ext}`);
  } catch (e) {
    // 忽略非法 URL
  }
});

之后可安全使用：a[data-ext$=".pdf"] { ... }