css如何选中包含特定属性的元素_利用[attr]属性选择器过滤目标元素

新闻中心 NEWS CENTER

2025-12-16

浏览次数：次

属性选择器[attr]可匹配含指定属性的元素，无论值为何；支持[attr="val"]等七种匹配方式，并可组合使用及注意大小写、引号等细节。

直接用 [attr] 选择器就能选中带有指定属性的元素，不管属性值是什么。

只要元素有这个属性，无论值为空、为数字、为字符串，甚至值是空格或 null（HTML 中写成 attr=""），都会被选中。

img[alt] → 选中所有带 alt 属性的 <img alt="css如何选中包含特定属性的元素_利用[attr]属性选择器过滤目标元素" > 标签
[disabled] → 选中所有含 disabled 属性的元素（如按钮、输入框）
input[type] → 选中所有写了 type 属性的 <input>，包括 <input type=""> 或 <input type="text">

仅判断“是否存在”不够时，可用带比较符的写法进一步缩小范围：

[attr="value"] → 属性值完全等于 value（区分大小写）
[attr~="val"] → 属性值是用空格分隔的单词之一，比如 class="btn primary large" 可用 [class~="primary"] 匹配
[attr|="en"] → 属性值等于 en 或以 en- 开头，常用于语言代码：lang="en" 或 lang="en-US"
[attr^="https"] → 属性值以 https 开头，适合筛选外链：a[href^="https://"]
[attr$=".pdf"] → 属性值以 .pdf 结尾，如下载链接：a[href$=".pdf"]
[attr*="keyword"] → 属性值中包含子串 keyword，不区分位置：data-info*="urgent"

单独用属性选择器可能太宽泛，配合标签名、类名或伪类更安全：

Ghostwriter

Replit推出的AI编程助手，一个强大的IDE，编译器和解释器。

238 查看详情 Ghostwriter

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

button[data-action][disabled] → 同时具备 data-action 和 disabled 两个属性的按钮
a[href][href!="#"] → 有 href 且值不等于 # 的链接（排除锚点占位）
input[type="checkbox"]:checked[data-priority] → 已勾选、类型为 checkbox、且带 data-priority 属性的复选框

属性选择器看似简单，但几个细节容易出错：

HTML 中布尔属性如 checked、required，写成 <input required> 就算存在，无需赋值；CSS 中用 [required] 即可匹配
属性名始终不加引号，但属性值在选择器中必须加引号（单/双均可），除非是纯字母数字且不含特殊字符——但为防意外，**建议统一加引号**
HTML 属性名不区分大小写，但 CSS 属性选择器区分大小写（除非文档是 XHTML 且声明了 namespace），稳妥起见保持与 HTML 一致的大小写
动态添加的属性（如 JS 设置 el.setAttribute('data-loaded', 'true')）会立即生效，选择器实时响应，无需额外操作

以上就是css如何选中包含特定属性的元素_利用[attr]属性选择器过滤目标元素的详细内容，更多请关注其它相关文章！