CSS [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 选择器是精准控制网页样式的工具。随着项目复杂度的增加，开发者需要更灵活的语法来匹配特定元素。CSS [attribute|=value] 选择器正是这类工具中的“隐形高手”，它能通过属性值的特殊格式快速定位元素，尤其适用于处理国际化、语言切换等场景。对于编程初学者和中级开发者来说，掌握这个选择器不仅能提升代码效率，还能为构建可维护的样式系统打下基础。

二、深入理解 [attribute|=value] 选择器

1. 属性选择器的基础概念

在 CSS 中，属性选择器允许开发者通过元素的属性（如 class、id、lang）来定位元素。常见的属性选择器包括：

• [attribute]：匹配带有指定属性的元素。
• [attribute=value]：匹配属性值完全等于指定值的元素。
• [attribute^=value]：匹配属性值以指定值开头的元素。
• [attribute$=value]：匹配属性值以指定值结尾的元素。
• [attribute*=value]：匹配属性值包含指定值的元素。

而 [attribute|=value] 是属性选择器中一个更细分的工具，它用于匹配属性值 精确等于 指定值，或 以指定值开头并紧接连字符（-） 的元素。例如：

/* 匹配 lang 属性值为 "en" 或 "en-*"（如 "en-US"）的元素 */
[lang|=en] {
  color: blue;
}

2. 语法详解：为什么用“|=”符号？

“|=”符号的设计灵感来自 语言代码规范。在国际化开发中，语言代码常以 en（英语）、zh-CN（中国简体中文）、fr-FR（法国法语）等形式书写。[attribute|=value] 的作用就是匹配这类“主语言代码”或其“扩展代码”。

语法格式：
[attribute|=value]

• attribute：目标元素的属性名（如 lang、class）。
• value：需要匹配的基准值（如 en、zh）。

3. 实例演示：如何匹配语言代码？

假设我们有以下 HTML 结构：

<p lang="en">This is English text.</p>
<p lang="en-US">This is American English.</p>
<p lang="zh-CN">这是简体中文。</p>
<p lang="fr">Ceci est du français.</p>

使用 [lang|=en] 可以同时选中 en 和 en-US 的段落：

[lang|=en] {
  background-color: lightblue;
}

效果：

• 前两个段落背景变为浅蓝色，第三个（zh-CN）和第四个（fr）不受影响。

三、应用场景与实战案例

1. 国际化网站的语言样式控制

在多语言网站中，开发者常需要为不同语言版本的元素设置独特样式。例如：

<!-- HTML 结构 -->
<div class="language-switcher">
  <button lang="en" type="button">English</button>
  <button lang="zh-CN" type="button">简体中文</button>
  <button lang="fr" type="button">Français</button>
</div>

/* CSS 样式 */
[lang|=en] {
  color: #1a73e8;
  border: 2px solid #1a73e8;
}

[lang|=zh-CN] {
  color: #e53e3e;
  border: 2px solid #e53e3e;
}

[lang|=fr] {
  color: #34a853;
  border: 2px solid #34a853;
}

效果：
每个按钮的文本和边框颜色会根据语言代码自动应用不同样式，无需为每个语言单独编写类名。

2. 表单验证的动态反馈

在表单中，可以通过属性选择器结合 data-* 自定义属性，实现动态样式反馈：

<!-- HTML 表单 -->
<input type="text" data-validate="required" placeholder="必填字段">
<input type="email" data-validate="email" placeholder="请输入邮箱">

/* CSS 样式 */
/* 匹配所有 data-validate 属性值以 "required" 开头的元素 */
[data-validate|=required] {
  border-color: #ff6b6b;
}

/* 匹配所有 data-validate 属性值以 "email" 开头的元素 */
[data-validate|=email] {
  border-color: #4ecdc4;
}

效果：

• 必填字段的边框会显示红色，邮箱字段的边框会显示绿色。

四、与其他属性选择器的对比与选择

1. 与 [attribute=value] 的区别

• [attribute=value]：要求属性值 完全匹配。
  例如 [lang=en] 仅匹配 lang="en" 的元素，不包括 lang="en-US"。

• [attribute|=value]：允许 部分匹配，只要值以指定值开头并接 -。
  例如 [lang|=en] 会匹配 en 和 en-*。

2. 与 [attribute^=value] 的区别

• [attribute^=value]：匹配以指定值 开头 的任何字符串，不限定格式。
  例如 [lang^=en] 会匹配 en、en-US、english 等。

• [attribute|=value]：要求 严格格式，即 value- 的形式。
  例如 [lang|=en] 不会匹配 english，但会匹配 en-US。

3. 选择场景建议

五、最佳实践与注意事项

1. 结合其他选择器提升精准度

通过组合使用其他选择器，可以进一步缩小匹配范围。例如：

/* 仅匹配 class 为 "button" 且 lang 属性以 "zh" 开头的元素 */
.button[lang|=zh] {
  font-family: "Microsoft YaHei", sans-serif;
}

2. 注意属性值的格式规范

• 确保属性值符合 value- 格式（如 zh-CN、en-US），否则选择器无法匹配。
• 避免在非语言代码的场景滥用此选择器，可能导致意外匹配。

3. 性能优化建议

• 优先使用类名选择器：如果场景允许，直接通过类名（如 .en）控制样式通常更快。
• 避免过度嵌套：减少选择器的复杂度，例如 [class|=button] 可能不如 .button 直接。

六、结论：掌握选择器，提升开发效率

CSS [attribute|=value] 选择器是一个在特定场景下强大而优雅的工具。它通过属性值的 “主-扩展” 格式匹配，帮助开发者高效处理国际化、表单验证等需求。对于初学者，建议从简单案例入手，逐步结合实际项目理解其逻辑；中级开发者则可通过组合选择器和优化策略，进一步提升代码的可维护性。

通过本文的讲解，希望读者不仅能理解这个选择器的语法，还能在实际开发中灵活应用它，让 CSS 的强大功能为项目赋能。