如何通过CSS属性选择器匹配特定文件格式的链接_使用[href$=".pdf"]-css教程-PHP中文网

[href$=".pdf" i]是唯一可靠写法，因浏览器默认区分大小写且$=只匹配完整属性值结尾，无法处理.pdf、.pdf?x=1等真实场景；加i标志可忽略大小写，现代浏览器已全量支持。

$如何通过css属性选择器匹配特定文件格式的链接_使用[href$=\$

为什么[href$=".pdf"]经常不生效

直接写[href$=".pdf"]在多数情况下就失效，不是选择器本身错，而是实际链接的href值往往不以.pdf结尾。比如document.pdf?version=1或report.PDF，前者因带查询参数被排除，后者因大小写不匹配被忽略。浏览器默认区分大小写，且$=只匹配**完整属性值的结尾**，不处理 URL 参数或编码。

常见错误包括：

用[href=".pdf"]——这要求整个href值**完全等于**".pdf"，现实中几乎不存在
用[href*="pdf"]——会误中https://api.example.com/v1/pdf-report这类非文件链接
漏掉引号或用了中文引号：[href$=“.pdf”] → 整条规则被浏览器跳过

必须加`i`标志才能覆盖真实场景

PDF 文件链接实际后缀可能是.PDF、.Pdf、.pDf，甚至混合大小写的.pdf?t=123（但注意：带查询参数时仍不匹配）。唯一可靠方案是显式添加i标志：[href$=".pdf" i]。

这个i表示“ignore case”，它让匹配不区分大小写，且现代浏览器（含 iOS Safari、Chrome 120+、Firefox 115+）已全量支持，无需前缀或降级。

统一建议写法：

a[href$=".pdf" i]
a[href$=".zip" i]
a[href$=".docx" i]

不要写[href$=".PDF" i]或[href$=".Pdf" i]——小写后缀 + i最简洁、可维护性最强。

::before图标不显示？先看`content`和`font-family`

给 PDF 链接加图标常用::before伪元素，但图标空白最常见的原因是content没生效：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

content: none或根本没声明content → 伪元素节点不创建
content: "" → 节点创建了，但内容为空，什么也不渲染
复制粘贴进来的content: ""混入全角引号或不可见字符 → CSS 解析失败

若用 Font Awesome，还必须显式设置：

font-family: "Font Awesome 6 Free"（名称必须与@font-face中声明的一致）
font-weight: 900（FA Solid 图标依赖该字重）

检查方式：打开开发者工具 → 找到对应::before → 切到“Computed”面板，确认font-family和content的最终计算值，不是只看“Styles”里的声明。

图标和文字对不齐？别调`top`，用`vertical-align`

::before默认是 inline 元素，按基线（baseline）对齐。而文字有 descender（如g、y下延），图标没有，视觉上就“浮高了”。硬设top: -2px或position: absolute反而更难维护。

推荐做法：

加display: inline-block，再设vertical-align: middle——轻量、兼容性好、响应 font-size 变化稳定
避免vertical-align: top：它把图标顶到行框顶部，和文字中线脱节
慎用position: absolute：需父元素position: relative，且transform: translateY(-50%)在字号缩放时可能偏移

如果父元素设置了line-height: 2，改vertical-align值会影响位置——这是正常行为，不是 bug。

真正容易被忽略的是：属性选择器匹配的是 HTML 中实际写出的href值，不是浏览器解析后的 URL。动态生成的链接（如 JS 拼接）、服务端重定向、或带 hash 的路径（file.pdf#page=3）仍能被$=捕获，但带查询参数的（file.pdf?v=1）就不行——这时得换思路，比如加data-filetype="pdf"配合[data-filetype="pdf"]。