[lang|="zh"] 能匹配 lang="zh" 和 lang="zh-cn"，因其要求值以 "zh" 开头且后跟连字符或字符串结束，符合 bcp 47 语言标签规范，不匹配 lang="zhcn" 或 lang="zho"，且对大小写敏感、仅适用于 lang 属性。
为什么 [lang|="zh"] 能匹配 lang="zh" 和 lang="zh-CN"
因为 |= 是专为连字符分隔场景设计的，它不等于前缀匹配，而是“以指定值开头 + 后跟连字符或字符串结束”。lang="zh" 满足“以 zh 开头且后面无字符”，lang="zh-CN" 满足“以 zh 开头且后跟连字符”，两者都合法。
但 lang="zhCN" 或 lang="zho" 都不匹配——前者没连字符，后者不以 zh 开头。
-
[lang|="en"]匹配lang="en"、lang="en-US"、lang="en-GB"，不匹配lang="en_US"（下划线不是连字符） - 该选择器对大小写敏感，
[lang|="ZH"]不会匹配lang="zh" - 它只适用于规范定义为 BCP 47 语言标签的属性，比如
lang；其他属性如class或data-lang即使值形似也不适用
[lang|="zh"] 和 [lang^="zh"] 的行为差异在哪
^= 是纯前缀匹配，只要字符串开头是 zh 就命中，不管后面是什么：lang="zh-CN"、lang="zhCN"、lang="zh123" 全部匹配。而 |= 多了一层语义约束：必须紧接连字符或到结尾。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
[lang^="zh"]会误匹配lang="zhCN"（不符合语言标准）和lang="zh-abc-def"（虽合法但可能超出预期范围） -
[lang|="zh"]更安全，它天然过滤掉非标准格式，适合做语言相关样式隔离 - 性能上无明显差别，但语义正确性远高于
^=——这不是优化问题，而是是否符合规范的问题
能不能用 |= 匹配 class="btn-primary" 中的 btn
不能。|= 要求属性值本身是以连字符分隔的命名空间结构，而 class 是空格分隔的类名集合，浏览器不将其按连字符切分。写 [class|="btn"] 不会匹配任何 class="btn-primary" 元素。
-
[class~="btn"]才是匹配空格分隔类名的正确方式 -
[class*="btn"]可以匹配btn-primary，但也会匹配subbtn、reboot等无关项 -
|=在非lang场景下基本无实用价值，强行复用只会导致逻辑错位
实际项目中容易被忽略的边界点
真正难的不是语法，而是值来源不可控：服务端模板渲染、JS 动态注入、用户输入拼接都可能导致 lang 值含不可见字符（如 BOM、零宽空格），此时 [lang|="zh"] 会静默失效。
- CSS 选择器无法感知这些字符，也不提供清洗能力
- 若发现本该匹配却没生效，优先检查
lang属性值的实际字节序列（用浏览器开发者工具的“复制属性值”再粘贴到十六进制查看器） - 这类问题必须在 JS 层预处理，比如
element.lang = element.lang.trim().replace(/\u200B/g, '')
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
