:not([href]) 选中的是未声明 href 属性的 元素，而非语义上的“占位链接”；真正占位链接（如 href="#"、href="javascript:void(0)"）均含 href 属性，故无法被 :not([href]) 匹配。

:not([href]) 不能用来选中“不可点击的占位链接”，它选中的其实是**根本没写 href 属性的 @#@#@#@#@#@#@#@#@#@0 —— 有 href，:not([href]) 完全不匹配，但它实际可点击（会跳到页面顶部）

@#@#@#@#@#@#@#@#@#@1 —— 同样有 href，:not([href]) 不匹配，但它是典型占位链接

@#@#@#@#@#@#@#@#@#@2 —— 有 href，:not([href]) 不匹配，也是常见占位写法

真正想筛“占位链接”，得靠属性值判断

所谓“占位链接”，通常指写了 href 但无真实跳转意图的链接，常见值包括 #、javascript:void(0)、空字符串 ""、或仅含空格。CSS 层面只能基于字符串前缀/包含关系做粗筛：

• 排除空 href：a[href=""]
• 排除 # 开头：a[href^="#"]
• 排除 javascript: 开头：a[href^="javascript:"]
• 排除仅空格（需配合 JS 清洗后才可靠，CSS 无法 trim）
• 组合使用：a[href]:not([href^="http"]):not([href^="/"]):not([href^="mailto"]):not([href^="tel"]) —— 筛出有 href 但又不像真实外链/路径/协议链接的元素

用 :not() 时最容易踩的坑

:not() 只作用于当前选择器命中的元素本身，不会穿透后代，也不改变匹配逻辑层级：

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

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

下载

• 写 nav a:not([href]) 只会选中 nav 下那些**没写 href 的 <a></a>**，不是“所有导航里可点击链接之外的其他东西”
• :not([href]) 和 :not([href=""]) 完全不同：前者排除所有带 href 属性的 <a></a>，后者只排除 href 值恰好为空字符串的
• IE 11 及更早版本不支持 :not()，如果需要兼容，得用显式类名（如 .placeholder-link）替代
• 别试图用 *:not([href]) —— 通配符加伪类在多数浏览器中被忽略或报错

真要统一控制占位链接样式，最稳妥的方式还是主动加类：<a href="#" class="placeholder"></a>，再写 a.placeholder。CSS 的 :not() 是筛选工具，不是语义识别器——它看不到“意图”，只认属性是否存在、值是否匹配字符串模式。

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