如何通过CSS属性选择器匹配所有包含特定 title 属性的图片？

[attr]选择器仅匹配存在指定属性的元素，无论值是否存在、是否为空或是否合法；如[title]可选中<img title=”头像”>、<img title>和<img title=””>，而[title=””]只匹配属性值为空字符串的情况。

直接用 [title] 就能选中所有带 title 属性的 <img> 元素，不需要写 img[title="..."] 这种精确值匹配——除非你真要限定具体值。

为什么 [title] 能命中 <img title> 这种没等号的写法

CSS 的 [attr] 选择器只检测属性是否存在（调用的是 Element.hasAttribute('title')），不关心有没有 =、值是不是空字符串、甚至是不是合法值。所以这三种写法全被 [title] 匹配：

• <img src="a.jpg" title="头像">
• <img src="b.jpg" title>（HTML5 允许布尔式简写）
• <img src="c.jpg" title="">（空字符串值）

常见误判是以为必须写 title="xxx" 才算“有”，其实只要标签里出现 title 这个词，就满足条件。

[title] 和 [title=""] 完全是两回事

这两个选择器行为完全不同，混用会导致样式漏掉或错配：

立即学习“前端免费学习笔记（深入）”；

• [title] → 匹配 <img title="提示">、<img title>、<img title="">
• [title=""] → 只匹配 <img title="">，连 <img title> 都不中（它的属性值是 undefined，不是空字符串）

如果你只想给「显式写了空 title」的图片加样式，才用后者；日常想覆盖所有带 title 的图片，无脑用前者。

只作用于 <img> 元素？加标签名前缀就行

如果页面里还有 <p title>、<a title> 等其他元素，而你只想影响图片，就把选择器写成：

img[title] {
  border: 1px solid #999;
}

注意：img[title] 不等于 [img][title]（后者语法错误）；也不推荐写成 *[title]（通配符性能差，且会污染其他元素）。

大小写敏感问题也得留心：HTML 属性名本身不区分大小写，但 CSS 选择器默认区分——[TITLE] 在标准 HTML 文档里通常不生效，要用 [title i] 显式忽略大小写（仅当真有大写属性时才需要）。