[attribute="value"]选择器用于匹配属性值完全相等的元素，如a[href="https://example.com"]精准定位链接，input[type="submit"]选中提交按钮，div[data-role="header"]筛选自定义属性元素，需注意值必须完全匹配（含大小写），支持i标志忽略大小写，但不支持部分匹配多值属性，适用于表单、链接及组件化开发中的精确样式控制。
在CSS中，[attribute="value"] 选择器用于匹配拥有指定属性且其值**完全等于**给定值的元素。它是一种属性选择器，能精准定位符合特定属性值的HTML元素，无需依赖类名或ID。
基本语法
选择器格式为：
[attribute="value"]
其中 attribute 是属性名称，value 是该属性的完整、精确值。
常见使用场景
以下是一些典型用法示例：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
匹配特定链接地址：
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），此选择器不会部分匹配。例如：
<div class="box highlight"> <br> 使用 <font style="color:#d197d9; font-family:Consolas, 'Courier New', monospace">[class="box"]</font> 无法匹配，因为完整值是 "box highlight"。 <p>基本上就这些。掌握 [attribute="value"] 能让你更灵活地针对特定属性进行样式控制，特别适合表单样式、链接定制和组件化开发。不复杂但容易忽略细节，尤其是完全匹配这一点。</p> </div>
