直接用[href^="https"]会匹配所有HTTPS链接，包括本站链接；需配合:not([href*="yourdomain.com"])排除内链，否则无法准确标识外部链接。
匹配以 HTTPS 开头的外部链接
直接用 [href^="https"] 就能抓到所有 HTTPS 协议的链接，但要注意它也会匹配 https://yourdomain.com —— 如果只想处理「真正外部」的，得配合 :not() 排除内链：a[href^="https"]:not([href*="yourdomain.com"])。常见错误是漏掉协议前缀写成 [href^="www"]，这在现代 URL 中基本无效，因为浏览器地址栏和 href 属性都带协议。
给 PDF 和 PNG 链接加不同图标
用结尾匹配最稳妥：a[href$=".pdf"]::after 和 img[src$=".png"]。注意两点：一是 $= 匹配的是整个属性值结尾，所以 href="report.pdf?ver=1" 不会被选中；二是大小写敏感，.PDF 不匹配 .pdf，必要时可加 i 标志（[href$=".pdf" i]），但 IE 不支持，需确认兼容范围。
匹配含特定关键词的跳转链接
[href*="baidu"] 或 [href*="utm_source"] 这类包含匹配很实用，但容易误伤：比如 href="https://github.com/baiduxxx" 也会被选中。若想更准，可组合使用：a[href^="https://"][href*="baidu"]，强制协议 + 关键词共存。另外，* 不支持通配符语法（如 *baidu* 是非法的），只做子串搜索，别当成正则用。
避免 class 属性干扰的写法
有人会误写 [class*="nav"] 来找导航链接，但 class 是空格分隔的多值属性，正确做法是用 [class~="nav"]（匹配独立单词）或直接上语义化属性，比如统一加 data-link-type="external" 再写 [data-link-type="external"]。后者更可控，也绕开了 class 值顺序、重复、空格压缩等隐性问题。
真正难的不是写对语法，而是判断该用 ^= 还是 *=，或者要不要加 i——这些选择直接影响样式是否漏选或错选，且上线后很难靠肉眼发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
