:has() 是目前唯一能根据后代内容反向选择父级的原生 CSS 方案，但仅支持可选中子元素（不能匹配纯文本节点），需配合语义 class 或 data 属性使用；文本匹配应优先通过 JavaScript 添加 class 或直接用属性选择器（如 [data-action="submit"]）实现，避免依赖易变的文本内容。
用 :has() 配合子元素文本判断（现代浏览器）
Chrome 105+、Safari 15.4+、Firefox 119+ 支持 :has()，它是目前唯一能“根据后代内容反向选择父级”的原生方案。但注意：:has() 不接受伪元素或文本节点作为参数，所以不能写 :has("提交")；必须依赖可选中的子元素承载该文本。
- 若目标文本在子标签内（如按钮里有
提交），可用button:has(span:contains("提交"))—— 但:contains()是非标准伪类，实际不可用；正确写法是button:has(span:nth-child(1):not([data-*]))这类结构推断，或更稳妥地加语义 class：button:has(.btn-text-submit) - 若文本是纯文本节点（如
），:has()无法匹配，此时必须改 HTML：把文本包进提交，再写button:has(.label:is(:where(.label, .label + *)):not(:has(*)))—— 太绕，不推荐；直接加 class 更实际 - 性能提示：
:has()在复杂 DOM 中可能触发重排，避免在body:has(...)这类宽泛选择器中使用
用 JavaScript 补足 CSS 的盲区（兼容性兜底）
CSS 本身没有文本内容匹配能力，所有“含某文本”的需求，最终都得靠 JS 定位并添加 class，再由 CSS 样式化。这不是妥协，而是事实。
- 不要用
innerText做模糊匹配，它会合并空白、忽略隐藏文本；优先用textContent并 trim：
document.querySelectorAll('button').forEach(el => {
if (el.textContent.trim() === '提交') {
el.classList.add('is-submit-btn');
}
});
includes('删除') vs === '删除'；中文常有空格或换行，建议 el.textContent.replace(/\s+/g, '') === '确认'
用属性驱动代替文本驱动（推荐的工程实践）
真正健壮的选择逻辑，应该从源头规避“靠文本选元素”这个反模式。UI 文本会变，翻译会加空格，A/B 测试会切文案，而属性（data-action、role、aria-label）可控且语义明确。
- 按钮统一加
data-action="submit"，CSS 写button[data-action="submit"]—— 稳定、可读、支持 :is() 和 :where() - 用
aria-label作辅助判断（尤其图标按钮）：button[aria-label*="删除"]，但注意*=是属性子串匹配，慎用于多语言环境 - 如果必须保留中文文本样式，可在构建时用 PostCSS 插件自动为含特定文本的元素注入 data 属性，把运行时逻辑提前到编译期
为什么不用 [title*="xxx"] 或 [aria-label*="xxx"] 直接匹配？
这类属性选择器看似简单，但极易误伤。title 是提示信息，不是功能标识；aria-label 是给读屏器用的，可能被翻译、压缩、甚至为空。
立即学习“前端免费学习笔记（深入）”；
-
div[title*="警告"]会匹配到，但你只想高亮操作按钮button[aria-label*="编辑"]在英文 locale 下变成aria-label="Edit"，选择器立即失效- 更隐蔽的问题：某些 UI 库会自动覆写
实际项目里，“匹配含某文本的元素”听起来像一个 CSS 问题，本质是数据建模问题。文本属于视图层输出，不该成为选择器依据。最省事的解法，永远是让开发者在写 HTML 时就打上明确的功能标记。aria-label，导致选择器在更新组件后突然不生效
