答案：[attr=value]选择器用于精准匹配特定属性值的元素。1. 可选中type="password"的输入框设置样式；2. 为target="_blank"的链接添加外链图标；3. 根据lang="zh"或lang="en"设定不同字体；4. 结合data-status="disabled"控制按钮状态，减少类名依赖，提升语义性与维护性。
![css选择器[attr=value]在实际项目中如何应用](https://img.php.cn/upload/article/000/969/633/176074674243229.jpeg)
在实际项目中，CSS选择器 [attr=value] 用于选中具有特定属性且属性值完全匹配的元素。它属于属性选择器的一种，精准性强，适合在不依赖类名或 ID 的情况下对特定元素进行样式控制。
1. 精准匹配表单元素状态
在表单开发中，经常需要根据输入框的 type 或其他属性来设置样式，无需额外添加类名。
例如，只给密码输入框设置特殊边框：[type="password"] {
border: 2px solid #007acc;
}
这样可以避免为每个密码框手动添加 class，保持 HTML 简洁。
2. 控制带有特定属性值的链接样式
当需要对特定目标或协议的链接做视觉区分时，[attr=value] 非常实用。
比如，只为站外链接添加图标：a[target="_blank"]::after {
content: " ↗";
font-size: 0.8em;
color: #999;
}
这样用户能直观识别哪些链接会打开新页面。
3. 区分不同语言内容的显示样式
在多语言网站中，可通过 lang 属性设置不同语言文本的字体或排版。
立即学习“前端免费学习笔记（深入）”；
例如，让中文和英文使用不同字体：[lang="zh"] {
font-family: "Microsoft YaHei", sans-serif;
}
[lang="en"] {
font-family: Arial, sans-serif;
}
这对提升多语言阅读体验很有帮助。
4. 配合自定义属性实现样式逻辑
HTML 自定义属性（data-*）常与 [attr=value] 搭配，实现语义化样式控制。
比如控制按钮状态：button[data-status="disabled"] {
opacity: 0.5;
cursor: not-allowed;
background: gray;
}
此时无需切换 class，直接修改 data-status 属性即可响应样式变化。
基本上就这些常见用法。[attr=value] 在减少类名污染、提升语义性和简化 JavaScript 样式操作方面有明显优势，但要注意性能，避免过度嵌套或频繁使用在大量元素上。
