如何使用CSS选择器[title*=search]选取含有特定文本的元素？

本文共计936个文字，预计阅读时间需要4分钟。

伪原创开头内容本体，不试图解答案问题，不数落，不超过100个字

为什么 [title*="search"] 不能选“含 search 文本”的段落或按钮

这个选择器只看 HTML 属性（如 title、data-id、alt），不扫描 DOM 文本节点。比如：
<p>Search results loaded</p> —— 即使里面写着 “Search”，[title*="search"] 完全无视它，因为 p 没有 title 属性。
真正生效的是类似这样的写法：<button title="Advanced search filter">...，这时才会命中。

• 它只作用于带 title 属性的元素，不是所有元素自动拥有
• 大小写敏感："Search" ≠ "search"
• 匹配的是连续子串，title="my-search-box" 可以命中，但 title="sea rch"（中间有空格）不行

想匹配真实可见文本？CSS 本身做不到

CSS 没有原生能力读取和匹配元素内的纯文本内容。所谓 :contains("search") 是实验性伪类，**未被任何主流浏览器标准化支持**（Chrome/Firefox/Safari 均不认）。你写上去不会报错，但也不会生效。

• 唯一接近可用的现代方案是 :has()，但它必须依赖子元素承载文本，例如：div:has(span:is(.label):not([data-*])) 这类绕弯写法，既不可靠又难维护
• 如果文本直接写在标签里（如 <h2>Search</h2>），:has() 也无能为力——它不接受文本节点作为参数
• 别指望用 innerText 或正则在 CSS 里做判断，这属于 JavaScript 职责范围

真正可行的替代路径：用属性代替文本

把语义信息从“肉眼可见的文本”提前挪到属性里，是最稳定、可预测、易调试的做法。

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

• 把 <span>Search</span> 改成 <span data-action="search">Search</span>，然后用 [data-action="search"] 精确控制
• 对批量组件统一加 data-category="search-ui"，再用 [data-category*="search"] 批量选中——比依赖文案更健壮
• 避免用 class 做文本映射（如 class="search-btn"），因为 class 名可能随 UI 改版而删减或重命名；data- 属性专为逻辑标记设计，不受样式影响

容易忽略的关键细节

很多人试了 [title*="search"] 发现不生效，第一反应是 selector 写错了，其实更可能是：

• HTML 中漏写了引号：title=search 在 HTML 里合法，但在 CSS 里必须写成 [title*="search"]，漏引号直接失效
• 属性名拼错：写成 [tite*="search"] 或 [Title*="search"]（CSS 属性名始终小写）
• 目标元素没渲染完成就执行样式注入（尤其 SSR/SSG 场景），此时属性还没挂上

真正难的从来不是怎么写选择器，而是决定该把语义锚点放在哪一层：DOM 结构、属性、还是 JS 状态。选错地方，再精准的 *= 也救不回来。