登录
首页 >  文章 >  前端

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

时间：2026-01-04 16:39:43 446浏览 收藏

大家好，我们又见面了啊~本文《CSS 属性选择器 $= 用于选择属性值以指定字符串结尾的元素。它常用于匹配类名、ID 或其他属性值的后缀。语法：[attribute$="value"] { /* 样式规则 */ }示例说明：1. 匹配 class 以 btn 结尾的元素

[class$="btn"] { background-color: blue; color: white; }效果：所有 class 以 btn 结尾的
都会被选中，背景变为蓝色，文字为白色。2. 匹配 id 以 footer 结尾的元素 [id$="footer"] { border: 1px solid red; }效果：#main-footer 和 #side-footer 会添加红色边框。3. 匹配 href 以 .pdf 结尾的链接 下载 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"] { ... }

    容易被忽略的兼容性与空格问题

    这个选择器在 IE7+ 和所有现代浏览器都支持，但有两处硬伤常被忽略：

    • 属性值前后若有空格（比如服务端模板渲染出 href=" doc.pdf "），$= 会完全失灵——CSS 不会自动 trim
    • 如果属性是布尔型（如 disabled），[disabled$=""] 不会匹配已存在的

    真正要匹配布尔属性是否存在，应该用 [disabled]，而不是试图用 $=。

    终于介绍完啦！小伙伴们，这篇关于《CSS属性选择器$=使用详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

    前往漫画官网入口并下载 ➜
    相关阅读
    更多>
    最新阅读
    更多>
    课程推荐
    更多>