不能用[href^="http"]筛选“http但非https”链接，因其会误匹配https://（因https以http开头）；唯一可靠写法是[href^="http://"]，精确匹配http协议加双斜杠，语义明确且无歧义。
为什么不能用 [href^="http"] 筛选“HTTP但非HTTPS”链接
这个写法本身就会匹配所有以 http 开头的字符串，包括 https://（因为 https 确实以 http 开头）。CSS 的 ^= 是纯前缀匹配，不支持排除子串、不支持否定逻辑，更不支持正则中的负向先行断言。所以 [href^="http"]:not([href^="https"]) 是无效的——:not() 里不允许带属性值匹配的复杂条件，浏览器会直接忽略整条规则。
[href^="http://"] 是唯一可靠写法
要真正锁定 HTTP 协议（非 HTTPS），必须精确到协议+双斜杠：http://。这是语义明确、无歧义、浏览器 100% 支持的最小单位。
- ✅ 匹配
<a href="http://example.com"></a> - ✅ 不匹配
<a href="https://example.com"></a>（开头是https，不是http://） - ✅ 不匹配
<a href="//cdn.example.com"></a>（开头是//） - ❌ 不匹配大写协议如
HTTP://EXAMPLE.COM（CSS 属性选择器默认区分大小写）
如何兼容大小写或避免漏掉 HTTP 链接
现实中几乎不存在大写协议的生产环境链接，强行加 [href^="HTTP://"] 只会让样式表冗余且难以维护。更实际的做法是：
- 接受小写协议为事实标准，只写
[href^="http://"] - 如果项目明确要求兼容旧爬虫或测试数据里的大写写法，需单独补一条：
[href^="HTTP://"]，但不要指望它能覆盖所有变体（比如HtTp://） - 别试图用
[href*="http://"]替代——它会误中href="/article?ref=http://x"这类内部 URL 参数 - 若页面用了
<base href="https://...">，那所有相对链接都自动转成 HTTPS，此时[href^="http://"]自然不会命中，这是预期行为
真正容易被忽略的边界情况
所谓“HTTP 但非 HTTPS”链接，在现代网页中已极其稀少。更常见的误判来自：
-
href="http://localhost:3000"或http://127.0.0.1：它们确实是 HTTP，但属于本地开发地址，未必算“外部” -
href="http://yourdomain.com"：协议是 HTTP，但域名和当前站一致，属于内链降级，不是典型外链 - 没有
http://前缀却仍走 HTTP 的链接（如通过 Service Worker 拦截后跳转）：CSS 完全无法感知
这些场景靠 CSS 属性选择器根本无法区分——它只看 HTML 中写的原始 href 字符串，不查网络协议、不解析重定向、不读取当前 origin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
