css根据属性值切换样式怎么写_利用css[attr=value]精准匹配

属性选择器[attr=”value”]可直接根据html属性值应用样式，支持精确匹配、开头/结尾/子串/单词匹配等多种方式，适用于表单类型、按钮状态及自定义数据等场景。

直接用属性选择器 [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] 同时匹配两个属性