[attribute="value"]选择器用于匹配属性值完全相等的元素，如a[href="https://example.com"]精准定位链接，input[type="submit"]选中提交按钮，div[data-role="header"]筛选自定义属性元素，需注意值必须完全匹配（含大小写），支持i标志忽略大小写，但不支持部分匹配多值属性，适用于表单、链接及组件化开发中的精确样式控制。
在CSS中，[attribute="value"] 选择器用于匹配拥有指定属性且其值**完全等于**给定值的元素。它是一种属性选择器，能精准定位符合特定属性值的HTML元素，无需依赖类名或ID。
基本语法
选择器格式为：
[attribute="value"]
其中 attribute 是属性名称，value 是该属性的完整、精确值。
常见使用场景
以下是一些典型用法示例：
-
匹配特定链接地址：
a[href="https://example.com"]
选中所有指向 "https://example.com" 的链接。 -
匹配特定类型的输入框：
input[type="submit"]
仅选中 type 为 "submit" 的 input 元素。 -
根据自定义属性筛选元素：
div[data-role="header"]
匹配 data-role 属性值为 "header" 的 div 元素。
注意事项与技巧
使用时需注意以下几点以避免常见错误：
- 属性值必须完全匹配，包括大小写。例如，[type="text"] 不会匹配
type="Text"或type="textarea"。 - 若希望忽略大小写，可在值后添加 i 标志：
input[type="email" i]
这样 "Email"、"EMAIL" 都能被匹配。 - 如果属性值包含空格或多值（如 class），此选择器不会部分匹配。例如：
使用 [class="box"] 无法匹配，因为完整值是 "box highlight"。基本上就这些。掌握 [attribute="value"] 能让你更灵活地针对特定属性进行样式控制，特别适合表单样式、链接定制和组件化开发。不复杂但容易忽略细节，尤其是完全匹配这一点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
