异常教程
CSS3 [attribute*=value] 选择器（手把手讲解）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
在网页开发中，CSS 的选择器是控制元素样式的核心工具。随着 CSS3 的发展，属性选择器（Attribute Selectors）为开发者提供了更灵活的元素筛选方式。其中，[attribute*=value] 选择器因其强大的模式匹配能力，成为处理动态内容和复杂场景的利器。无论是为包含特定字符串的链接添加样式，还是根据表单输入内容实时反馈，这一选择器都能帮助开发者高效完成任务。本文将深入解析其原理、用法及实际案例，帮助读者掌握这一实用技能。
一、基础概念：属性选择器概述
1.1 属性选择器的分类
CSS3 属性选择器通过匹配 HTML 元素的属性值来定位目标元素。常见的类型包括：
- 精确匹配：
[attr=value]（完全匹配属性值） - 前缀匹配：
[attr^=value]（属性值以指定字符串开头） - 后缀匹配：
[attr$=value]（属性值以指定字符串结尾） - 子字符串匹配：
[attr*=value]（属性值包含指定字符串）
比喻说明：
可以将属性选择器想象为图书馆的分类系统。例如，[attr*=value] 就像一本包含“科幻”关键词的书籍，无论它出现在书名的哪个位置，都会被系统筛选出来。
1.2 [attribute*=value] 的核心功能
该选择器通过 *= 符号，实现对属性值中是否包含指定子字符串的判断。例如：
<a href="https://example.com/page1" class="btn primary">按钮1</a>
<a href="https://example.com/page2" class="btn secondary">按钮2</a>
a[class*="btn"] {
background-color: #4CAF50;
color: white;
}
上述代码会为所有 class 属性中包含 btn 的 <a> 元素添加绿色背景和白色文字。
二、语法详解：如何正确使用 [attribute*=value]
2.1 基础语法结构
element[attribute*="value"] {
/* 样式声明 */
}
element：可选，指定要匹配的 HTML 元素（如input,a等）。attribute：必填，要检查的属性名称（如class,href,data-*等）。value：必填，要匹配的子字符串，需用引号包裹（单双引号均可）。
2.2 精确匹配 vs 子字符串匹配
对比 [attr=value] 与 [attr*=value]：
/* 精确匹配：只匹配 class="primary" 的元素 */
.btn[title="primary"] { ... }
/* 子字符串匹配：匹配 title 包含 "ary" 的元素，如 "primary", "secondary" */
.btn[title*="ary"] { ... }
2.3 多重条件与组合选择器
可通过逗号分隔多个选择器，或结合其他 CSS 选择器：
/* 匹配 class 包含 "btn" 且 type 为 "button" 的元素 */
button[class*="btn"][type="button"] {
padding: 10px;
}
/* 或者匹配多个属性条件 */
input[placeholder*="邮箱"], input[placeholder*="电话"] {
border: 2px solid #ccc;
}
三、实际案例：场景化应用解析
3.1 案例 1：动态按钮样式控制
假设页面有多个按钮，其 class 名包含 btn，但具体类型不同：
<button class="btn primary">提交</button>
<button class="btn danger">删除</button>
<button class="btn secondary">取消</button>
/* 为所有包含 "btn" 的按钮添加基础样式 */
button[class*="btn"] {
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
/* 为 "primary" 类型的按钮添加特殊颜色 */
button[class*="primary"] {
background-color: #4CAF50;
color: white;
}
3.2 案例 2：表单验证反馈
在表单中，根据输入内容实时显示提示信息：
<input type="text" name="username" placeholder="用户名">
<input type="email" name="email" placeholder="电子邮箱">
/* 当输入内容包含 "@" 时，显示绿色边框 */
input[type="email"][value*="@"] {
border-color: green;
}
/* 当用户名输入长度超过 5 个字符时，显示验证图标 */
input[name="username"]:valid[value*="5"]::after {
content: "✓";
color: green;
}
3.3 案例 3：数据属性驱动样式
通过自定义 data-* 属性控制元素状态：
<div data-status="active">当前状态：激活</div>
<div data-status="pending">当前状态：待处理</div>
/* 匹配 data-status 包含 "act" 的元素 */
div[data-status*="act"] {
background-color: #4CAF50;
color: white;
}
/* 匹配 data-status 包含 "pend" 的元素 */
div[data-status*="pend"] {
background-color: #FFA000;
color: black;
}
四、与其他选择器的对比与协同
4.1 对比 [attr^=value] 和 [attr$=value]
- 前缀匹配
[^=]：如[class^="nav-"]匹配nav-bar,nav-menu等以nav-开头的class。 - 后缀匹配
[$=]：如[href$=".pdf"]匹配所有以.pdf结尾的链接。 - 子字符串匹配
[*=]：更灵活，但可能匹配到意外结果（如[title*="app"]会匹配application和apples）。
4.2 与类选择器（.）的组合使用
当需要同时匹配类名中的特定字符串和完整类名时：
/* 匹配同时有 "btn" 和 "primary" 类名的元素 */
.btn[class*="primary"] {
/* 仅对类名包含 "primary" 的按钮生效 */
}
4.3 与伪类（:not()）的组合
排除包含特定子字符串的元素：
/* 匹配 class 不包含 "hidden" 的元素 */
div:not([class*="hidden"]) {
display: block;
}
五、进阶技巧与注意事项
5.1 大小写敏感问题
默认情况下，[attribute*=value] 是大小写敏感的。若需忽略大小写，可添加 i 修饰符：
/* 忽略大小写，匹配 "App", "app", "APP" 等 */
div[class*="app" i] {
color: red;
}
5.2 性能优化建议
- 避免过度嵌套：如
div div div[title*="..."]可能影响渲染效率。 - 优先使用类选择器：若能通过类名直接控制样式，应优先使用
.my-class而非属性选择器。
5.3 跨浏览器兼容性
[attribute*=value] 在现代浏览器（Chrome 4+, Firefox 3.5+, IE9+）中均支持。若需兼容更旧的浏览器（如 IE8），可考虑使用 JavaScript 替代。
六、常见问题与解决方案
6.1 为什么匹配不到预期元素？
- 检查属性名称拼写：如
class是否拼写为clas。 - 确认值的精确性：
[title*="App"]无法匹配title="Application"中的 "App" 吗？
（可以匹配，因为子字符串存在）
6.2 如何匹配多个子字符串？
可使用多个选择器组合：
/* 匹配包含 "red" 或 "green" 的 class */
div[class*="red"], div[class*="green"] {
/* 样式声明 */
}
6.3 如何匹配空值或不存在的属性？
- 匹配无属性值：
[attr]（存在属性但值为空）。 - 匹配不存在的属性：
[attr=""]（精确匹配空值）。
结论：掌握 [attribute*=value] 的价值
CSS3 [attribute*=value] 选择器通过灵活的子字符串匹配能力，大幅提升了样式控制的效率。无论是处理动态生成的类名、优化表单交互，还是根据数据属性调整布局，这一选择器都能提供简洁高效的解决方案。对于开发者而言，理解其语法逻辑、合理结合其他选择器，并注意性能与兼容性问题，是将其优势最大化的关键。
在实际开发中，建议逐步替换冗余的类名选择器，利用属性选择器减少代码冗余。例如，将 btn-success, btn-error 等类名统一通过 [class*="btn"] 进行基础样式控制，再通过 [class*="success"] 进行差异化处理。这种模式不仅能提升代码的可维护性，还能让团队协作更高效。
希望本文的解析与案例能帮助读者快速掌握这一工具，并在项目中灵活应用。掌握属性选择器，是迈向 CSS 高级开发的重要一步。