当前位置：首页 > 文章列表 > 文章 > 前端 > CSS属性选择器可通过指定属性和值来匹配元素。例如，[type="text"] 会匹配所有 type 属性值为 text 的元素。若需更精确匹配，可使用以下方式：精确匹配：[attr="value"] 示例：[name="username"] 匹配 name="username" 的元素。部分匹配： [attr*="value"]：包含指定值（不区分大小写）。示例：[class*="btn"]

CSS属性选择器可通过指定属性和值来匹配元素。例如，[type="text"] 会匹配所有 type 属性值为 text 的元素。若需更精确匹配，可使用以下方式：精确匹配：[attr="value"] 示例：[name="username"] 匹配 name="username" 的元素。部分匹配： [attr="value"]：包含指定值（不区分大小写）。示例：[class="btn"]

2026-05-23 14:52:30 0浏览收藏

CSS属性选择器是一套强大而灵活的样式匹配工具，它不依赖类名或ID，而是直接基于HTML元素的属性及其值进行精准定位——从完全相等（[attr="value"]）、开头结尾（^=、$=）、子串包含（*=）、单词匹配（~=）到语言前缀（|=），甚至支持忽略大小写的智能匹配（i标志），广泛应用于文件图标定制、数据驱动样式、链接类型区分等实际场景，让开发者能以更语义化、更动态的方式控制页面表现。

css属性选择器如何匹配特定值

CSS属性选择器可以根据元素的属性及其值来选中特定元素。要匹配特定值，可以使用等号 = 进行精确匹配。

基本语法：匹配精确属性值

使用方括号 [] 包裹属性和值，并用等号连接：

[attr="value"]：选中属性 attr 的值完全等于 "value" 的元素

例如，只想选中 type="submit" 的按钮：

input[type="submit"] { background: blue; }

其他常用匹配方式

除了完全匹配，还可以根据需求使用以下形式：

[attr~="value"]：属性值中包含独立单词 "value"（适用于空格分隔的类名等）
[attr|="value"]：属性值以 "value" 开头，且后跟连字符或结束（常用于语言属性，如 lang="zh-CN"）
[attr^="value"]：属性值以 "value" 开头
[attr$="value"]：属性值以 "value" 结尾
[attr*="value"]：属性值中包含字符串 "value"（任意位置）

实际应用场景

假设你想为不同文件类型的链接添加图标：

a[href$=".pdf"] { background: url(pdf-icon.png); }
a[href*="youtube.com"] { background: url(yt-icon.png); }
button[data-action="delete"] { color: red; }

这些选择器不依赖类名或ID，能更灵活地针对具体属性值进行样式控制。

基本上就这些，关键是根据匹配精度选择合适的符号。

到这里，我们也就讲完了《CSS属性选择器可通过指定属性和值来匹配元素。例如，[type="text"] 会匹配所有 type 属性值为 text 的元素。若需更精确匹配，可使用以下方式：精确匹配：[attr="value"] 示例：[name="username"] 匹配 name="username" 的元素。部分匹配： [attr*="value"]：包含指定值（不区分大小写）。示例：[class*="btn"] 匹配类名中包含 btn 的元素。 [attr^="value"]：以指定值开头。示例：[href^="https"] 匹配以 https 开头的链接。 [attr$="value"]：以指定值结尾。示例：[src$=".jpg"] 匹配以 .jpg 结尾的图片路径。多属性组合：可通过多个属性选择器组合定位元素，如：[type="text"][name="email"]。忽略大小写：使用 i 标志（需在选择器末尾添加）实现不区分大小写的匹配，如：[name="Username" i]。**》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！