属性值完全匹配需用引号包裹，如[data-status="active"]；忽略大小写加i标志，如[lang="en" i]；布尔属性仅用[attr]形式；动态更新须用setAttribute而非dataset。

直接用 [attr="value"] 就能匹配属性值完全相等的元素，但要注意引号、大小写和空格细节，否则样式不生效。

属性值完全匹配：用双引号或单引号包裹值

HTML 中属性值带空格、特殊字符或纯数字时，不加引号在 CSS 里会解析失败；即使 HTML 里省略了引号，CSS 选择器也必须显式加引号。

• [data-status="active"] ✅ 正确（推荐统一用双引号）
• [data-status=active] ❌ 可能失效，尤其当 active 是变量名或含连字符时
• [type='submit'] ✅ 单引号也可，但别混用（如 [type="submit"] 和 [type='submit'] 在同一项目里保持一致）

忽略大小写匹配：加 i 标志符

默认是大小写敏感的，比如 [lang="en"] 不会匹配 lang="EN"。需要忽略大小写就加 i（放在右括号前，不加空格）：

[lang="en" i] { color: blue; }
[data-role="header" i] { font-weight: bold; }

注意：i 标志只在现代浏览器支持（Chrome 63+、Firefox 61+、Safari 15.4+），IE 完全不支持。

Wechat Article Html

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

下载

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

常见踩坑点：空格、布尔属性、动态更新

这些地方最容易让样式“看起来写了却没反应”：

• HTML 属性值前后有空格 → <div data-type=" error "> 不会被 <code>[data-type="error"] 匹配（得用 JavaScript trim 后设置，或改用属性存在选择器 [data-type]）
• 布尔属性如 disabled、checked → button[disabled] 有效，但 button[disabled="true"] 无效（因为 DOM 中它没有值，只是存在）
• JS 动态改属性后样式不更新 → 确保是用 el.setAttribute('data-state', 'done')，而不是直接赋值 el.dataset.state = 'done'（后者不会触发属性选择器重算，除非同时调用 el.setAttribute）

比完全匹配更灵活的写法

如果只需要部分匹配，别硬套 [attr="value"]，换用其他属性选择器：

• 开头匹配：[class^="btn-"] → 匹配 class="btn-primary"
• 结尾匹配：[src$=".png"] → 匹配 PNG 图片
• 包含单词（空格分隔）：[class~="hidden"] → 匹配 class="col hidden"
• 包含子串（慎用，性能差）：[alt*="logo"] → 匹配 alt="top-logo"

真正需要精确控制时，[attr="value"] 最可靠；但只要业务逻辑允许模糊匹配，优先选 ^= 或 ~=，它们语义更清晰、容错更强。