a[href]是最简且唯一推荐的写法，精准匹配所有带href属性的a标签，不区分属性值内容；而[href]会误伤link、base等非a标签元素，存在样式污染风险。
a[href] 是最简且唯一推荐的写法
直接写 a[href] 就能精准命中所有带 href 属性的 标签，不管值是 "#"、"https://"、"" 还是 "javascript:void(0)"——只要 HTML 中写了 href 这个属性，就匹配。它不关心值是否有效、是否可跳转、是否被 JS 后续修改，只看 DOM 渲染完成时属性是否存在。
别用 [href]，它会误伤 link、base、area 等标签
[href] 匹配的是“任意含 href 属性的元素”，包括 、。这些标签通常不需要链接样式，加了 [href] 很可能意外覆盖全局样式或触发浏览器默认行为（比如 link 被加上下划线）。a[href] 限定标签名，安全、语义明确、无副作用。
常见失效原因和避坑点
看似写了 a[href] 却没生效？多半是以下问题：
-
a[Href]或a[HREF]：CSS 属性名严格区分大小写，必须小写href -
a[href=]缺少引号：当属性值含空格、&、?、/时（如href="/page?x=1&y=2"），不加引号会导致解析失败；现代写法建议统一加双引号：a[href="/page?x=1&y=2"] -
a[href] *末尾多了一个空格：这变成后代选择器，匹配的是a[href]内部的所有子孙元素，不是a本身 - 在 Vue/React 中动态插入的链接：只要最终渲染出的 HTML 中
href已存在（非 JS 运行时才 setAttribute），a[href]就能捕获；但若用v-bind:href="null"或href={undefined}，属性根本不会出现在 DOM 中，自然不匹配
需要进一步筛选？用值匹配符，别堆 class
想只处理外链、锚点或 PDF？直接在 a[href] 基础上叠加属性值操作符，干净又高效：
- 外链高亮：
a[href^="http"]（注意是http，不是https，否则漏掉http://） - 锚点链接去下划线：
a[href^="#"] - PDF 加图标：
a[href$=".pdf"]（点号不用转义，这是字符串匹配，不是正则） - 排除空值和锚点（谨慎使用）：
a[href]:not([href=""]):not([href="#"])，但会漏掉href="javascript:..."和协议相对路径href="//cdn.com/file.js"
真正容易被忽略的是：属性选择器只认“静态存在”的属性，不感知 JS 动态写入、也不校验 URL 是否合法或服务端是否返回 404。匹配与否，只取决于那一刻 DOM 中 href 属性有没有被写出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
