必须写全[href^="https://"]才能精准匹配HTTPS链接，因[href^="https"]会误匹配httpsomething等非URL字符串，且不区分大小写、忽略协议相对链接//，仅做字符串前缀匹配。
用 [href^="https://"] 匹配以 https 开头的链接
直接写 [href^="https://"] 就能选中所有 href 属性值以 https:// 开头的元素，比如 <a href="https://example.com"> 或 <link href="https://cdn.example.css">。注意必须带协议和双斜杠，只写 "https" 会误匹配 href="httpsomething" 这类非 URL 字符串。
为什么不能只写 [href^="https"]
属性选择器 ^= 是前缀匹配，不校验语义。以下情况都会被错误选中：
<a href="httpsomething-else">-
<img src="https://...">（但src不是href，这例其实不会命中，仅作对比说明逻辑） -
<a href="HTTPS://example.com">（CSS 属性选择器默认区分大小写）
所以必须写全 https://，且确保目标元素确实用了小写协议头。若需兼容大写，得额外加 [href^="HTTPS://"]，但实际中几乎没人这么写 URL。
[href^="https://"] 的常见误用场景
这个选择器只看属性值字符串开头，不管链接是否真实可达、是否跨域、是否在 <a> 标签里。容易踩的坑有：
立即学习“前端免费学习笔记（深入）”；
- 匹配了
<link rel="stylesheet" href="https://...">—— 它确实是外部安全链接，但你样式意图可能只针对超链接 - 没过滤
javascript:https://...这类伪协议（虽然极少这么写，但理论上href="javascript:https://x"也会被选中） - 忽略相对路径或协议相对路径：
href="//example.com"不会被匹配，它没以https://开头
如果真要精准筛选「可跳转的外部 HTTPS 超链接」，得组合使用：a[href^="https://"]:not([href^="https://localhost"]):not([href^="https://127.0.0.1"])，但这就超出纯 CSS 能力边界了。
性能与浏览器兼容性基本无压力
[href^="https://"] 是 CSS3 标准属性选择器，所有现代浏览器（包括 IE7+）都支持。它本身不触发重排，性能开销极低。唯一要注意的是：不要把它和过于宽泛的祖先选择器连用，比如 body [href^="https://"] 在巨型 DOM 中可能略慢，但日常网页完全不用顾虑。
真正容易被忽略的是——它匹配的是「属性存在且值符合前缀」，不是「链接已加载完成」或「证书有效」。所谓“安全链接”，CSS 层面只能做到协议层面的字符串判断，HTTPS 的加密、证书验证、HSTS 等，它一概不感知。
