:not([attr])可精准选中未声明某属性的元素，如:not([title])匹配无title属性的，但不匹配title=""或title="提示"；常见错误是误用:not([title=""])，它仅排除空值而无法覆盖未声明场景。
如何用 :not([attr]) 选中不带某属性的元素
直接写 :not([title]) 就能选中所有没写 title 属性的元素，不是“title 值为空”，而是“压根没声明这个属性”。它匹配 <p>文本</p>，但不匹配 <p title="">文本</p> 或 <p title="提示">文本</p>。
常见错误是写成 :not([title=""])，这只能排除显式写了空字符串的元素，对完全没写 title 的标签无效。
-
[title]是属性存在选择器，只要 HTML 标签里出现了title=（哪怕值为空），就算匹配 -
[title=""]是属性值精确匹配，只抓title=""，漏掉没写title的情况 - 想排除多个属性？链式写：
:not([class]):not([id]):not([data-testid])
:not([class]) 和 :not(.active) 的本质区别
:not([class]) 判断的是「class 属性是否存在」；:not(.active) 判断的是「有没有名为 active 的类」。这是两类完全不同的逻辑。
比如：<div class="btn"> 会被 <code>:not([class]) 排除（因为有 class 属性），但会被 :not(.active) 选中（因为没 active 类）。
- 要筛出「真·没写 class 属性」的元素，只能靠
:not([class]) -
:not(.a):not(.b):not(.c)永远无法替代:not([class])，因为任意一个未枚举的类名都会让它失效 - 框架（如 Vue/React）可能自动注入空
class=""，导致原本匹配的元素突然不匹配了
想选「完全没有任何属性」的元素，怎么写？
没有万能选择器，必须手动枚举你关心的属性。例如针对 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 标签，常用写法是：
p:not([class]):not([id]):not([style]):not([title]):not([data-*])
注意：[data-*] 不是合法 CSS 语法，不能这么写；实际得展开为 :not([data-id]):not([data-name]) 等——这意味着你得知道项目里实际用了哪些 data- 属性。
- 枚举越全，匹配越准，但也越难维护
- 如果属性组合太多，建议改用 JS 动态加 class，或从源头规范 HTML 输出
- 别试图用
*:not([class]):not([id])...匹配所有标签，特异性低、性能差、易误伤
兼容性和调试时容易忽略的点
:not([attr]) 在 IE9+ 和所有现代浏览器都支持，但真实 DOM 结构可能和你写的 HTML 不一致。
- 打开开发者工具，右键「Edit as HTML」看元素是否真的没渲染
class属性，还是被框架悄悄加上了 - 空格、换行、服务端模板插值可能导致
class=""或class=" "，这些都会让:not([class])失效 - 样式是否生效？用
getComputedStyle(el)查，别只靠肉眼判断
真正麻烦的从来不是怎么写选择器，而是 HTML 实际输出是否如你所想。
