纯 css 无法匹配元素文本内容，但可通过属性选择器匹配属性值中的字符串，如 [attr*="text"]；:contains() 是实验性伪类，未被主流浏览器正式支持，不可用于生产环境。
纯 CSS 无法匹配元素的文本内容（innerText 或 textContent），但可以精准匹配**属性值中的字符串**——只要目标文本已作为属性值存在，比如 data-* 、title、alt 或 aria-label。
用 [attr*="text"] 匹配属性值中包含某子串
这是最常用、兼容性最好的方式，从 IE7 起就支持：
-
[data-id*="user"]会命中data-id="user-123"、data-id="admin-user-edit"，但也会误中data-id="superuser" - 大小写敏感：如果 HTML 中写的是
data-status="ERROR"，[data-status*="error"]不会匹配，需改用[data-status*="error" i]（现代浏览器支持，但 IE 完全不支持i标志） - 引号必须是英文半角：写成
[data-key*="中文"]没问题，但若用了中文引号 “中文” 就会失效 - 空格算字符：
[title*="login"]不会匹配title=" user login "（前后有空格），因为实际值含空格，而匹配的是连续子串
为什么 :contains("text") 不能用
:contains() 是实验性伪类，Chrome/Firefox/Safari 均未将其纳入正式标准。即使某些版本临时启用（如旧版 Chrome 加 flag），上线后极易崩溃或被移除。它也不接受变量、不支持嵌套、无法与 ! 否定组合——不是稳定方案。
常见错误是开发者看到 DevTools 里“似乎生效”，就误以为可用；实际部署时，同一段 CSS 在 Safari 上完全不触发，在 Firefox 上报错，属于典型“伪可用”陷阱。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
匹配开头或结尾更安全的场景
当属性值结构可控时，优先用 ^= 或 $= 减少误匹配：
-
[href^="https://"]比[href*="https"]更准——后者会把http://example.com?ref=https也拉进来 -
[src$=".webp"]可靠，但[src*=".webp"]会错选src="/images/webp-banner.jpg" -
[class^="btn-"]看似合理，但 class 属性值是空格拼接的整体字符串，class="primary btn-large"实际值是"primary btn-large"，并不以"btn-"开头 → 此时该用[class~="btn"]（匹配空格分隔的独立单词）
真正难处理的是不可见字符和格式污染
属性值里混入 BOM、零宽空格（）、全角空格、换行符时，CSS 选择器完全无感——它只按 DOM 解析后的原始字符串比对，不会自动 trim 或 normalize。
例如：data-name=" admin "（首尾有空格）或 data-name="admin"（末尾藏零宽空格），[data-name="admin"] 和 [data-name*="admin"] 全部失效。这种问题只能靠 JavaScript 在设属性前清洗：el.setAttribute('data-name', value.trim().replace(/\u200b/g, ''))。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
