CSS `:contains` 伪类常见问题： **如何使用 :contains 选择包含特定文本的元素？**

Question

**问题描述：** 在使用 CSS 进行样式设计时，前端开发者常常希望根据元素内部的文本内容来选择并样式化特定元素。CSS 提供了一个非常有用但常被误解的伪类 `:contains`，用于匹配包含特定文本的元素。然而，许多开发者在实际使用过程中遇到了问题：如何正确使用 `:contains` 伪类选择包含特定文本的元素？它是否支持模糊匹配？是否区分大小写？是否可以应用于所有类型的元素？通过解答这些问题，可以帮助开发者更高效地利用 `:contains` 进行开发。

Answer 1

深入理解 CSS 伪类 :contains 的使用与限制

在前端开发中，我们经常需要根据元素内部的文本内容进行样式控制。CSS 提供了一个伪类 :contains，用于匹配包含特定文本的元素。然而，由于其行为和兼容性问题，它常常被误解或误用。本文将从基础使用、匹配规则、大小写敏感性、适用元素类型以及实际应用场景等多个角度深入探讨 :contains 的使用。

1. 基本语法与使用方式

:contains 的基本语法如下：

p:contains("hello") {
    color: red;
}
    

以上代码表示：选中所有包含文本 "hello" 的 <p> 元素，并将其文字颜色设置为红色。

2. 是否支持模糊匹配？

:contains 并不支持模糊匹配，它只进行精确匹配。也就是说，只有当元素的文本内容中包含指定的完整字符串时才会匹配成功。

• 匹配成功：包含完整字符串，如 "hello world" 中包含 "hello"
• 匹配失败：只包含部分字符，如 "helo" 不会匹配 "hello"

3. 是否区分大小写？

是的，:contains 是区分大小写的。例如：

选择器	是否匹配
div:contains("Hello")	匹配 "Hello"
div:contains("hello")	不匹配 "Hello"

4. 可以应用于所有类型的元素吗？

:contains 可以应用于大多数 HTML 元素，但有一些限制：

• 适用于块级元素如 <div>, <p>, <li> 等
• 不适用于某些内联元素（如 <span>）如果它们的文本内容为空或被其他标签包裹
• 不适用于表单控件如 <input>, <textarea>，因为它们的值不在 DOM 文本节点中

5. 实际应用与注意事项

虽然 :contains 非常强大，但在实际项目中使用时需要注意以下几点：

1. 性能问题：大量使用 :contains 可能影响页面渲染性能，特别是在大型文档中
2. 兼容性问题：目前 :contains 是 jQuery 的扩展选择器，原生 CSS 中并不支持，需依赖 JavaScript 或 jQuery
3. 动态内容问题：如果文本内容是通过 JavaScript 动态插入的，需确保 :contains 在内容加载后执行

6. 替代方案与最佳实践

由于原生 CSS 不支持 :contains，开发者可以考虑以下替代方案：

• 使用 JavaScript 动态添加 class
• 在后端渲染时直接添加特定 class
• 使用 jQuery 的 :contains 插件实现类似功能

7. 示例代码与流程图

下面是一个使用 jQuery 的 :contains 示例：

$('li:contains("apple")').css('background-color', 'yellow');
    

该代码将所有包含 "apple" 的 <li> 元素背景色设置为黄色。

流程图展示如何使用 :contains：

graph TD
    A[开始] --> B[查找包含特定文本的元素]
    B --> C{是否匹配文本?}
    C -->|是| D[应用样式]
    C -->|否| E[跳过]
    D --> F[结束]
    E --> F