css原生不支持按文本内容选择元素，:contains()未被主流浏览器支持且非标准；可靠方案是用属性选择器（如[data-key*="word"]）或javascript动态添加类后css匹配。
CSS 原生无法根据元素的文本内容（如 innerText 或 textContent）进行选择；:contains() 是实验性伪类，未被 Chrome、Safari、Edge 支持，Firefox 仅在启用特定 flag 时有限可用——生产环境不可用。
为什么 :contains("text") 不能用
它不属于 CSS 标准，规范中无定义；DevTools 里“看起来生效”往往是浏览器临时实现或调试器渲染误导；上线后同一段 CSS 在 Safari 完全不触发，在 Firefox 可能报错或静默失效。更关键的是：:contains() 不支持变量、不能嵌套、无法与 :not() 组合，连基础否定逻辑都做不到。
真正可用的替代方案：把文本放进属性里
只要目标文本已作为 HTML 属性值存在（比如 data-* 、title、aria-label），就能用标准属性选择器精准匹配：
-
[data-key*="word"]匹配data-key值中包含"word"的所有元素（IE7+ 全兼容） -
a[title^="Error"]选中title以"Error"开头的链接 -
img[src$=".png"]选中 PNG 图片，a[href*="baidu"]选中含 “baidu” 的外链 - 注意引号必须是英文半角；大小写敏感，如需忽略大小写，现代浏览器支持
[attr*="val" i]，但 IE 完全不支持
当文本真正在标签内且无法改 HTML 时
必须用 JavaScript 配合 CSS 类做标记：
- 遍历目标元素，用
el.textContent.includes("target")判断 - 命中后添加一个临时 class，如
el.classList.add("has-text-target") - 再用纯 CSS 写
.has-text-target { … } - 避免直接用
innerHTML或正则匹配，防止误伤子元素中的文本（例如<p>Text <span>don't want</span></p>）
最易被忽略的一点：很多人试图用 p:not(:has(span))::text 提取“不含子标签的纯文本”，但这和“包含某关键词”是两回事——前者筛选结构，后者筛选内容；二者语义不同，不能混用，也不存在通用捷径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
