属性选择器[attr="value"]可直接根据HTML属性值应用样式，支持精确匹配、开头/结尾/子串/单词匹配等多种方式，适用于表单类型、按钮状态及自定义数据等场景。
![css根据属性值切换样式怎么写_利用css[attr=value]精准匹配](https://img.php.cn/upload/article/000/969/633/176835836744319.jpeg)
直接用属性选择器 [attr="value"] 就能根据 HTML 属性的值应用特定样式，无需 JavaScript，简洁高效。
基础写法：匹配固定属性值
当元素带有指定属性且值完全相等时触发样式：
button[data-status="success"] { color: #28a745; }a[target="_blank"] { text-decoration: none; }input[type="password"] { padding-left: 30px; }
注意：值必须完全一致（区分大小写），且需加引号（推荐双引号，避免解析歧义）。
常见实用场景
这类选择器特别适合处理状态类、类型类或语义化标记：
立即学习“前端免费学习笔记（深入）”；
- 表单控件类型区分：
input[type="email"], input[type="tel"] { border-color: #007bff; } - 按钮状态控制：
button[disabled] { opacity: 0.6; cursor: not-allowed; }（仅匹配存在 disabled 属性，不限值） - 自定义数据状态：
div[data-loaded="true"]::after { content: "✓"; }
进阶匹配方式
除了精确匹配，CSS 还支持几种扩展语法：
-
[attr~="val"]：匹配空格分隔列表中的某个单词，如class="btn primary large"可用[class~="primary"] -
[attr^="val"]：匹配开头，如a[href^="https://"] { color: #0d6efd; } -
[attr$=".pdf"]：匹配结尾，如a[href$=".pdf"] { font-weight: bold; } -
[attr*="login"]：匹配子串，如form[action*="login"] { margin-top: 20px; }
注意事项与技巧
实际使用中要注意几点：
- 属性值含特殊字符（如点、括号）需转义或加引号，例如
[data-id="item.123"]中的点不用转义，但[data-id="item[1]"]推荐写成[data-id="item\[1\]"] - HTML 中布尔属性（如
checked、required）只要存在即生效，写input[required]即可，不必写[required="required"] - 结合其他选择器提升精度，如
button[data-role="submit"][disabled]同时匹配两个属性
