:not([alt]) 是唯一准确匹配无 alt 属性 img 元素的 CSS 写法，它排除的是属性不存在的情况，而非属性值为空；[alt=""] 匹配空值，[alt^=""] 语法非法，三者语义完全不同。
用:not([alt])匹配没有alt属性的图片
直接写 img:not([alt]) 就能选中所有没带 alt 属性的 img 元素。这不是“排除有值的”，而是“排除存在该属性的”——只要标签里没出现 alt 这个词，就命中。
为什么不能用[alt=""]或[alt^=""]来反向筛选
[alt=""] 匹配的是显式写了 alt="" 的图片，[alt^=""] 语法非法（空字符串不能作开头匹配值）；它们和“没有 alt”是三类完全不同的状态：
-
img alt="头像"→ 有alt，值非空 -
img alt=""→ 有alt，值为空字符串 -
img src="x.jpg"→ 根本没有alt属性
只有第三种才属于“无 alt 属性”，:not([alt]) 是唯一准确表达它的 CSS 写法。
兼容性与性能注意点
:not([attr]) 在所有现代浏览器中都支持（Chrome 1+、Firefox 1.5+、Safari 3.1+、Edge 12+），IE9+ 也支持。但要注意两点：
立即学习“前端免费学习笔记（深入）”；
- 不要写成
*:not([alt])或img:not([alt]):not([title])这类过度泛化的组合，特异性低且可能误伤其他元素 - 避免在大量图片的页面中用它触发重排——比如给
img:not([alt])加outline: 2px solid red只用于开发检查，上线前应移除
实际调试建议：快速标出缺失 alt 的图片
开发时想一眼看出哪些图片漏了 alt，可以临时加这段样式：
img:not([alt]) {
outline: 2px dashed #f00;
outline-offset: 2px;
}
上线前务必删掉——它不语义、不美观，且对可访问性检测工具（如 axe）可能造成干扰。真正要修复的，是补上合理的 alt 值，而不是靠 CSS 掩盖缺失。
