如何使用CSS选择器匹配包含特定属性的元素-css教程-PHP中文网

[attr]匹配所有声明该属性的元素，无论值是否存在、为空或合法；[attr=""]仅匹配属性存在且值为空字符串的情况，二者逻辑不同，不可混用。

如何使用css选择器匹配包含特定属性的元素

[attr] 能直接匹配所有声明了该属性的元素，不管值是否存在、是否为空、甚至是否合法——这是最简方式，但也是最容易误用的起点。

为什么 `[class]` 会选中 `class=""` 的元素

HTML 允许写 class=""，它确实声明了 class 属性，只是值为空字符串。[class] 只检测属性是否存在（等价于 JavaScript 的 el.hasAttribute('class')），不校验值内容。所以

会被选中，常导致样式意外应用，比如给所有带 class 的容器加边框，结果空白 div 也被框住。

同理，[title] 会命中（布尔式简写）、、三种写法
[disabled] 能匹配和，而 [disabled=""] 只匹配后者
若你真想排除空值干扰，得靠组合判断，比如 [title]:not([title=""])，但注意这不能过滤 title 布尔写法（它的值是 undefined，不是空字符串）

`[attr]` 和 `[attr=""]` 是两套逻辑

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

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

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

下载

[title] → 匹配、、
[title=""] → 只匹配；不中（属性值为 undefined）
日常想覆盖所有带 title 的图片，无脑用 img[title]；只有明确要处理「显式写了空 title」的场景，才用 [title=""]

如何限定只作用于某类标签

如果页面里还有

、 等其他元素，而你只想影响图片，就加标签名前缀：img[title] { border: 1px solid #999; }


img[title] 是正确写法；[img][title] 语法错误；*[title] 性能差且污染范围过大
同理，限制表单控件：input[required] 比 [required] 更安全，避免误中 

自定义属性也一样：button[data-action] 比 [data-action] 更可控

容易被忽略的大小写与兼容性细节
在标准 HTML 文档中，属性名不区分大小写，[Role]、[role]、[ROLE] 都能匹配 role="button"；但为了一致性和可维护性，必须统一用小写。

自定义属性（data-*）严格区分大小写：[data-user-id] 匹配 data-user-id="100"，但不匹配 data-UserID="100"

IE8 及更早版本不支持 ^=、$=、*= 等扩展语法，仅支持 [attr] 和 [attr="value"]


[attr*="val" i]（忽略大小写）在 Chrome 63+、Firefox 61+、Safari 11.1+ 支持，IE 完全不支持

真正难处理的不是语法本身，而是属性值来源不可控——比如 CMS 输出的 data-type="news-article-v2" 和 data-type="article-news" 并存，此时 [data-type*="news"] 就可能漏掉一半，得靠后端或构建时标准化，而不是靠选择器硬扛。