如何使用CSS选择器精准匹配文本内容为“Test”的元素？

:contains()选择器本身不支持正则表达式语法，你写的:contains("^Test$")只会把^Test$当作普通字符串去匹配，所以没效果。下面是几种可行的解决方案：

用jQuery的.filter()方法 #

通过过滤函数判断元素文本是否完全匹配目标值：

$('目标元素选择器').filter(function() {
  // 用trim去除文本前后空白，不需要忽略空白的话，直接用$(this).text() === 'Test'即可
  return $.trim($(this).text()) === 'Test';
});

原生JavaScript实现 #

如果不用jQuery，直接用原生JS遍历元素并判断：

document.querySelectorAll('目标元素选择器').forEach(el => {
  if (el.textContent.trim() === 'Test') {
    // 这里可以写对匹配元素的操作，比如修改样式
    el.style.color = 'red';
  }
});

额外说明 #

目前原生CSS还没有提供直接匹配元素文本内容完全相等的选择器，所以没法仅靠纯CSS实现这个需求，必须借助脚本逻辑完成精确匹配。

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