如何选择锚文本与href值一致的链接？能否仅用CSS设置其差异化样式？

好问题！目前纯CSS还没办法直接检测链接的锚文本是否和它的href属性值完全一致——CSS没有提供能对比元素内容和属性值的选择器（类似:where(text() === attr(href))这样的功能还未被支持）。所以要实现这个需求，我们得借助JavaScript来给符合条件的链接添加自定义类，之后就能用CSS轻松设置差异化样式了。

具体实现步骤 #

1. 用JavaScript筛选并标记符合条件的链接

我们需要遍历页面上的所有链接，对比每个链接的锚文本和href属性值，匹配成功就给它加一个自定义类名。这里要注意两个细节：

• 用getAttribute('href')获取原始的href值，避免浏览器自动把相对路径转成绝对路径导致判断错误
• 用trim()处理锚文本，去掉首尾的空白字符，避免因为格式问题误判

示例代码：

// 遍历所有<a>标签
document.querySelectorAll('a').forEach(link => {
  // 获取原始href属性值
  const originalHref = link.getAttribute('href');
  // 获取链接文本并去除首尾空白
  const linkContent = link.textContent.trim();

  // 对比两者是否完全一致
  if (originalHref === linkContent) {
    link.classList.add('text-matches-href');
  }
});

如果需要忽略大小写匹配，可以把对比逻辑改成：

if (originalHref.toLowerCase() === linkContent.toLowerCase()) {
  link.classList.add('text-matches-href');
}

2. 用CSS设置差异化样式

有了自定义类名后，就可以像普通CSS选择器一样给这些链接设置样式了：

/* 基础样式 */
.text-matches-href {
  color: #2563eb;
  font-family: monospace;
  text-decoration: none;
  border-bottom: 1px dashed #2563eb;
}

/* hover状态样式 */
.text-matches-href:hover {
  border-bottom-style: solid;
  background-color: #eff6ff;
}

额外注意事项 #

• 如果页面是动态加载内容（比如通过AJAX新增链接），要在内容加载完成后再执行上述JavaScript代码，或者使用事件委托来处理后续新增的链接
• 如果链接文本包含换行、多个空格等格式，可能需要进一步处理文本内容（比如用replace(/\s+/g, ' ')把多个空格换成单个），确保对比的准确性

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