如何在CSS中选取包含指定文本字符串的HTML元素？

目前没有纯CSS的方法可以直接选取包含特定文本内容的HTML元素，原因如下：

• [att^=val]、[att$=val]、[att*=val]这类属性选择器仅能匹配元素的属性值（比如class、id的内容），无法识别元素内部的文本内容。
• :contains()并非标准CSS选择器，它是jQuery等JS库实现的功能，浏览器原生CSS从未支持过这个选择器。

可行的替代方案：

• 通过JavaScript实现匹配：遍历目标元素，检查其文本内容是否包含指定字符串，给匹配的元素添加自定义类名，再用CSS类选择器设置样式。示例代码：

  // 遍历所有p标签，匹配包含'word'的元素
  document.querySelectorAll('p').forEach(el => {
    if (el.textContent.includes('word')) {
      el.classList.add('contains-word');
    }
  });
  

  对应的CSS样式：

  .contains-word {
    color: red; /* 示例样式 */
  }
  

• 静态页面手动添加类名：如果页面内容固定，可直接给包含目标文本的元素手动添加特定类名，之后用类选择器进行样式控制。

内容的提问来源于stack exchange，提问作者Vendrel