CSS属性选择器[attr]可匹配任意含指定属性的元素，无论属性是否有值；如[title]选中所有带title属性的元素，注意大小写敏感性及与[attr="value"]的区别。

可以直接用 CSS 的属性选择器 [attr] 来匹配带有指定属性的元素，无需关心属性是否有值、值是什么，只要该属性存在就生效。

基础写法：匹配存在某属性的元素

例如，给所有带有 title 属性的元素加边框：

[title] { border: 1px solid #ccc; }

这样，<div title="提示">、<code><a title=""></a>、甚至 <p title></p>（HTML5 中允许布尔属性简写）都会被选中。

注意属性名大小写敏感性

HTML 中属性名不区分大小写，但 CSS 选择器默认区分（除非使用 [attr i] 忽略大小写）：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

• [class] 能匹配 class="btn"，也能匹配 CLASS="btn"（在 HTML 文档中）
• 但在 XML 或 XHTML 模式下，或自定义元素中，建议统一小写，或显式加 i 标志：[data-role i]

结合其他选择器更精准定位

避免全局污染，推荐限定标签或上下文：

• a[download] —— 只给带 download 属性的链接加样式
• input[disabled] —— 专门设置禁用表单控件的外观
• img[alt=""] —— 匹配 alt 属性为空字符串的图片（注意：不匹配缺失 alt 的元素）

常见误区提醒

别混淆 [attr] 和 [attr="value"]：

• [hidden] 匹配所有含 hidden 属性的元素（包括 hidden、hidden=""、hidden="anything"）
• [hidden=""] 只匹配 hidden=""（空值），不匹配 hidden 布尔写法
• HTML5 中 hidden 是布尔属性，推荐用 [hidden] 更稳妥