CSS无法根据元素文本内容选择元素，因:contains()非标准且浏览器支持差；可靠方案是用data属性标记语义，再通过属性选择器匹配；若必须匹配真实文本，则需JavaScript配合textContent处理。
CSS 本身做不到——没有标准语法能直接根据元素内显示的文本内容（比如 innerText）选中元素。
为什么 :contains() 不可靠
很多人试过 p:contains("搜索")，但它不是正式标准：Firefox 需手动开启实验标志，Chrome/Safari/Edge 完全不支持。写上去不会报错，但样式根本不会生效。
常见误判点：
- 把属性值匹配当成文本匹配（比如用
[title*="搜索"]去找页面上写着“搜索”的按钮，结果找不到——因为按钮没设title属性） - 误以为
::text能配合选择器筛选内容，其实它只是伪元素，不能用于条件判断
真正可用的 CSS 方案：靠属性，而不是文本
把语义信息从“人眼看到的文本”提前挪到 HTML 属性里，是最稳、最可维护的做法：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 给元素加
data-action="search"，再用[data-action="search"]精确命中 - 批量标记用
data-category="user-profile"，再用[data-category*="profile"]批量控制 - 避免用 class 名映射文案（如
class="btn-delete"），因为 UI 改版时 class 可能被删或重命名，data-属性专为逻辑服务，不受样式影响
必须匹配真实文本？得用 JavaScript
如果业务逻辑真依赖页面上实际渲染出的文本（比如“仅高亮含‘错误’二字的段落”），CSS 无解，只能交由 JS 处理：
-
document.querySelectorAll('p')拿到所有段落 -
.filter(p => p.textContent.trim().includes('错误'))筛出目标 - 再给匹配项加 class 或直接设置样式
注意：textContent 包含所有子节点文本，innerText 受 CSS 隐藏影响；中文常带换行/空格，建议先 .replace(/\s+/g, '') 再比对。
关键点在于：别让 CSS 承担它不该干的事。文本内容属于 DOM 数据层，属性才是 CSS 的责任边界。越早把语义埋进 data-，后期越少踩坑。
