[title*="search"] 只匹配title属性值中任意位置包含连续子串“search”的元素，不匹配页面文本内容；它大小写敏感、依赖属性存在，且无法用于纯文本节点，需用data-*属性替代文本驱动逻辑。
[title*="search"] 能选中 title 属性值里**任意位置包含 "search" 字符串**的元素，但它**不匹配页面上实际显示的文本内容**——这是最常见的误解起点。
为什么 [title*="search"] 不能选“含 search 文本”的段落或按钮
这个选择器只看 HTML 属性（如 Search results loadedtitle、data-id、alt），不扫描 DOM 文本节点。比如：[title*="search"] 完全无视它，因为 p 没有 title 属性。
真正生效的是类似这样的写法：，这时才会命中。
- 它只作用于带
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-*]))这类绕弯写法，既不可靠又难维护 - 如果文本直接写在标签里（如
Search
:has()也无能为力——它不接受文本节点作为参数 - 别指望用
innerText或正则在 CSS 里做判断，这属于 JavaScript 职责范围
真正可行的替代路径：用属性代替文本
把语义信息从“肉眼可见的文本”提前挪到属性里，是最稳定、可预测、易调试的做法。
- 把
Search改成Search，然后用[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 状态。选错地方，再精准的 *= 也救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
