attr$="value" 是 CSS 后缀匹配属性选择器，仅匹配属性完整值以指定字符串结尾的元素，不支持子串、正则，且默认不区分大小写。
什么是 attr$="value" 属性选择器
这是 CSS 属性选择器中用于「后缀匹配」的语法，表示匹配属性值以指定字符串结尾的元素。注意：它只对属性的**完整值**做结尾判断，不支持子串或正则，也不区分大小写（除非加 [attr$="Value" i]）。
href$=".pdf" 匹配 PDF 链接的实际写法
常见需求是给所有 PDF 下载链接加图标或统一样式。关键点在于：必须确保 href 属性值**确实以 .pdf 结尾**，而不是中间出现或带查询参数。
- ✅ 匹配：
<a href="report.pdf">、<a href="/files/data_v2.pdf"> - ❌ 不匹配：
<a href="report.pdf?ts=123">（因为实际值是report.pdf?ts=123，结尾不是.pdf） - ❌ 不匹配：
<a href="manual.pdf#section2">（结尾是#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"] { ... }
立即学习“前端免费学习笔记（深入）”；
容易被忽略的兼容性与空格问题
这个选择器在 IE7+ 和所有现代浏览器都支持，但有两处硬伤常被忽略：
- 属性值前后若有空格（比如服务端模板渲染出
href=" doc.pdf "），$=会完全失灵——CSS 不会自动 trim - 如果属性是布尔型（如
disabled），[disabled$=""]不会匹配已存在的<button disabled>，因为它的属性值是空字符串，但 DOM 中该属性可能根本没有值（即仅存在属性名）
真正要匹配布尔属性是否存在，应该用 [disabled]，而不是试图用 $=。
