CSS 原生不支持基于元素文本内容（如 innerText）的选择器；:contains() 是实验性伪类，未被主流浏览器正式支持；但可通过属性选择器（[attr*=val] 等）匹配属性值中的子串，或结合 JavaScript 实现文本内容筛选。
css 原生不支持基于元素**文本内容**（如 innertext）的选择器；`:contains()` 是实验性伪类，未被主流浏览器正式支持；但可通过属性选择器（`[attr*=val]` 等）匹配属性值中的子串，或结合 javascript 实现文本内容筛选。
在 Web 开发中，开发者常希望“选中所有包含某个关键词的段落”，例如匹配 <p class="something">123 word 456</p> 中含文本 word 的元素。遗憾的是，纯 CSS 无法直接根据元素的文本内容进行选择——这是 CSS 规范的设计限制：CSS 选择器仅作用于 DOM 结构、属性、状态和关系，不解析或匹配渲染后的文本内容。
✅ 可靠方案：使用属性选择器（适用于有可利用属性的场景）
若目标文本已存在于 HTML 属性中（如 data-*、title、alt 或 aria-label），可安全使用 CSS2.1 起就广泛支持的属性包含选择器：
/* 匹配 data-key 属性值中包含 "word" 的元素 */
[data-key*="word"] {
background-color: #ffeb3b;
}
/* 匹配 title 属性以 "Error" 开头的链接 */
a[title^="Error"] {
color: #f44336;
}<p data-key="keyword-word-abc">这段文字本身不含 word，但属性含</p> <a title="Error: Network timeout" href="#">网络错误</a>
⚠️ 注意：[attr*=val] 匹配的是属性值字符串，而非元素内文本。它从 CSS2.1 开始即被完全支持（Chrome 2+、Firefox 3.5+、Safari 3.1+、IE7+），非“不工作”——常见失效原因多为：
- 使用了中文全角引号 “” 而非英文半角 ";
- 类名/属性名拼写错误（如 .examples1 写成 .example1）；
- HTML 结构不匹配（如标签闭合错误、class 未正确添加）。
❌ 不可行方案：:contains() 伪类
你提到的 p.something:contains('word') 语法看似直观，但它属于 CSS Selectors Level 4 的草案特性，目前仅 Firefox 在有限条件下支持（需启用 layout.css.has-selector.enabled 标志），Chrome、Safari、Edge 均未实现。因此不可用于生产环境：
立即学习“前端免费学习笔记（深入）”；
/* ❌ 不推荐：无跨浏览器支持，行为不稳定 */
p.something:contains("word") {
font-weight: bold;
}✅ 实用替代：JavaScript 动态标记 + CSS
当必须依据真实文本内容筛选时，推荐轻量级 JS 配合 CSS 的组合方案：
// 查找所有 .something 段落，为其添加 data-has-word 属性（若含 "word"）
document.querySelectorAll('p.something').forEach(el => {
if (el.textContent.includes('word')) {
el.dataset.hasWord = 'true';
}
});/* 然后用标准属性选择器样式化 */
p.something[data-has-word="true"] {
border-left: 4px solid #2196f3;
padding-left: 8px;
}该方法兼容所有现代浏览器，性能良好（DOM 查询一次即可），且保持 CSS 的可维护性。
✅ 进阶技巧：利用 :has() + 文本节点（未来可期）
CSS Selectors Level 4 引入的 :has() 伪类（已获 Chrome 105+、Safari 15.4+、Edge 105+ 支持）仍不能直接匹配文本节点，但可配合子元素间接实现。例如：
<p class="something"> <span>123</span> word <span>456</span> </p>
/* ✅ 可行：匹配包含子元素 textContent 为 "word" 的 p（需包裹） */
p.something:has(span:is([data-text="word"])) { ... }但此法需预处理 HTML，适用性受限。最务实的结论是：文本内容驱动的样式，应由 JS 标记 + CSS 控制，而非强求纯 CSS 解决。
总结：CSS 的核心能力在于结构与属性，而非内容语义。面对“含某文本”的需求，请优先检查是否可通过 data-* 属性承载关键信息；若不可行，则用几行 JavaScript 安全、可靠地完成标记，再交由 CSS 渲染——这既是规范所向，也是工程最佳实践。
