CSS属性选择器[attr]可匹配任意含指定属性的元素,无论属性是否有值;如[title]选中所有带title属性的元素,注意大小写敏感性及与[attr="value"]的区别。
![css只给带属性的元素加样式_使用css[attr]属性存在选择器](https://img.php.cn/upload/article/000/969/633/176699076310313.jpeg)
可以直接用 CSS 的属性选择器 [attr] 来匹配带有指定属性的元素,无需关心属性是否有值、值是什么,只要该属性存在就生效。
基础写法:匹配存在某属性的元素
例如,给所有带有 title 属性的元素加边框:
这样,<div title="提示">、<a title="">、甚至 <p title>(HTML5 中允许布尔属性简写)都会被选中。
注意属性名大小写敏感性
HTML 中属性名不区分大小写,但 CSS 选择器默认区分(除非使用 [attr i] 忽略大小写):
立即学习“前端免费学习笔记(深入)”;
-
[class]能匹配class="btn",也能匹配CLASS="btn"(在 HTML 文档中) - 但在 XML 或 XHTML 模式下,或自定义元素中,建议统一小写,或显式加
i标志:[data-role i]
结合其他选择器更精准定位
避免全局污染,推荐限定标签或上下文:
-
a[download]—— 只给带download属性的链接加样式 -
input[disabled]—— 专门设置禁用表单控件的外观 -
img[alt=""]—— 匹配alt属性为空字符串的图片(注意:不匹配缺失alt的元素)
常见误区提醒
别混淆 [attr] 和 [attr="value"]:
-
[hidden]匹配所有含hidden属性的元素(包括hidden、hidden=""、hidden="anything") -
[hidden=""]只匹配hidden=""(空值),不匹配hidden布尔写法 - HTML5 中
hidden是布尔属性,推荐用[hidden]更稳妥










