基础：在 CSS 中使用属性选择器 [attribute="value"] 的语法与场景
基本语法与概念
本文将介绍如何在 CSS 中使用 [attribute="value"] 选择器，并定位包含指定文本的元素。属性选择器提供对具备特定属性且属性值等于某一字符串的元素的直接访问能力。属性名与属性值是核心要素。
使用场景包括但不限于状态标记、数据标识以及无额外类名的样式分组。通过这种方式，你可以实现更简洁的 CSS 结构，避免污染全局类名空间。精确匹配让样式只应用于目标元素。
/* 精确匹配属性值 */ [data-status="active"] { outline: 2px solid #2ecc71; }扩展：包含匹配与变体
当你需要匹配属性值中包含某个子串，而不是完全相同的值时，可以使用包含匹配符，即 [attr*="value"]。这在范围较广的筛选中很有用。请注意，这只是属性值的文本区分，不是元素文本内容本身。包含匹配提升了灵活性。
示例中，class 属性中包含某段关键字的元素可以统一样式，这样可以在不改动 HTML 结构的情况下实现分组样式。灵活性与可维护性并存。
/* 属性值包含某段字符串的匹配 */ .btn[class*="primary"] { background: #007bff; color: #fff; }定位包含指定文本的元素的策略
纯 CSS 的文本内容定位的局限性
要清楚地回答：如何定位包含指定文本的元素？在纯 CSS 中，直接基于元素文本内容进行选择是不支持的。也就是说，文本节点的匹配并非 CSS 的选择器能力范围。若必须实现此功能，需要借助结构调整或脚本辅助。
不过，可以借助数据属性来间接实现“包含指定文本”的定位。通过将文本内容放入属性值，仍然能使用 [attr] 或 [attr*] 进行筛选。数据属性是桥梁。
通过数据属性实现文本定位的实战
在 HTML 中为相关元素添加数据属性，例如 data-text，随后使用包含匹配来定位包含该文本的元素。请记住，文本信息应以属性形式存在，以便 CSS 选择器进行筛选。
还有一种更稳妥的做法是将要搜索的文本放在搜索时能访问到的属性中，例如 data-search，从而实现快速、可维护的样式定位。
/* 通过 data-text 属性定位包含文本的元素 */ span[data-text*="关键字"] { color: red; }进阶：使用 :has() 的实验性方案（兼容性与风险）
CSS4 提案引入的 :has() 伪类允许选择“包含某个子元素的父元素”，这让包含文本的定位有了新的维度。例如：ul:has(li[data-text*="目标文本"]) 可以选择含有文本标记的列表项的父列表。实验性特性意味着并非所有浏览器都严格支持。
在实践中，你可能需要结合回退方案，如使用 JavaScript 动态添加类名，或者在服务端渲染时就把文本信息放到可选的属性中，以确保样式的一致性。
/* 使用 :has() 的示例（注意兼容性） */ ul:has(li[data-text*="目标文本"]) { background: #f5f5f5; }兼容性与降级策略
由于 :has() 在部分浏览器中的支持程度不同，开发者应实现降级策略。兼容性评估是上线前的关键环节。一个常见的降级方案是：先用属性选择器实现基础样式，再用 JavaScript 在运行时为匹配元素打上 class，以覆盖老浏览器。
启用辅助技术的可访问性也很重要。例如，依赖数据属性来实现视觉定位时，确保屏幕阅读器仍能读取关键信息，不依赖视觉呈现的内容。无障碍性不可忽视。
实战要点：性能、可维护性与最佳实践
性能考量：属性选择器的成本
属性选择器通常比简单标签或类选择器成本略高，尤其是在大 DOM 树中。合理使用、尽量限制作用域、并结合伪类选择器可以减小性能损耗。性能优化是前端渲染的关键维度。
如果页面需要高频更新或大量列表项，优先为目标元素添加 class 或 data- attribute，避免在运行时频繁重绘。可维护性与性能并行考虑。
/* 使用数据属性限定作用域，提升选择效率 */ section[data-section="intro"] article[data-theme="light"] { border: 1px solid #ddd; }可维护性与可读性
通过数据属性与属性选择器结合，可以实现清晰、可维护的样式结构。避免过度使用复杂选择器，以保持 CSS 解析的稳定性。可读性和可维护性是长期开发的基石。
为团队提供一致的命名约定，记录哪些文本信息被映射到数据属性，可以减少后续的歧义与错误。命名规范很关键。
