a[href]能精准选中所有带href属性的标签，不限属性值内容；而[href]会匹配任意含href属性的元素，易误伤link等非链接标签。

直接用 a[href] 就能选中所有带 href 的 a 标签

不需要加类名、ID 或其他修饰，a[href] 是最简且最可靠的写法。它只匹配 HTML 中明确写了 href 属性的 <a></a> 元素，不管属性值是 #、https://... 还是空字符串 href="" —— 只要属性存在，就命中。

a[href] 和 [href] 的区别在哪

两者都能匹配带 href 的元素，但范围不同：

• a[href]：限定为 <a></a> 标签，安全、精准，推荐在链接样式中使用
• [href]：匹配**任意标签**（比如 <link>、<area>、甚至自定义标签）只要它有 href 属性，容易误伤
• 若页面里有 <link href="style.css">，[href] 会把它也拉进来，可能触发意外样式

常见误写和浏览器兼容问题

这些写法看似合理，实际无效或有坑：

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

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

下载

• a[Href] 或 a[HREF]：CSS 属性名区分大小写，必须小写 href
• a[href=...] 缺少引号：当属性值含空格、括号或特殊字符时（如 href="/path?x=1&y=2"），不加引号会解析失败
• a[href] *：末尾加空格会变成后代选择器，匹配的是 a[href] 内部的所有子孙元素，不是 a 本身
• IE6–IE7 不支持属性选择器，但当前已基本无需考虑；现代所有浏览器（包括 Safari iOS 10+、Chrome Android）均完整支持 a[href]

想进一步筛选？别堆 class，用属性值匹配符

如果只需处理特定类型的链接，直接在 a[href] 基础上叠加值匹配更干净：

• 外链高亮：a[href^="https://"]（注意双斜杠，^="http" 会误中 http:// 和 https://）
• 锚点链接统一去下划线：a[href^="#"]
• PDF 文件加图标：a[href$=".pdf"]（注意结尾点号要转义？不用，.pdf 是普通字符串，不是正则）
• 排除空 href：a[href]:not([href=""]):not([href="#"])，但注意这会漏掉 href="javascript:void(0)" 等非常规写法

真正容易被忽略的是：属性选择器对属性值的“存在性”判断是静态的——它不关心 href 最终是否可跳转、是否 404、是否被 JS 动态写入。DOM 渲染后才存在的 href（比如 Vue/React 中异步插入的链接），只要在渲染完成时已存在于 HTML 属性中，a[href] 就能捕获。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！