如何仅用CSS为当前:target对应的锚点链接添加样式？

要实现给触发跳转的锚点链接添加样式（而非目标元素），目前有两种可行的纯CSS方案，具体如下：

方案一：使用:has()选择器（现代主流浏览器支持） #

:has()是CSS选择器的新特性，能让我们基于兄弟元素的状态来选择当前元素，完美解决原结构中导航在目标元素前的反向选择问题。

代码示例 #

/* 高亮对应当前target的锚点链接 */
nav:has(~ section#foo:target) a[href="#foo"],
nav:has(~ section#bar:target) a[href="#bar"] {
  color: #e53e3e;
  font-weight: bold;
  border-bottom: 2px solid #e53e3e;
}

/* 保留原有的target元素样式（可选） */
:target {
  border: 2px solid red;
}

<nav>
  <a href="#foo">Foo</a>
  <a href="#bar">Bar</a>
</nav>

<section id="foo">This is foo.</section>
<section id="bar">This is bar.</section>

说明：

• 无需修改原有HTML结构，直接通过:has(~ section#xxx:target)检测对应目标元素是否激活，然后匹配导航中对应的锚点链接。
• 兼容性：Chrome 101+、Firefox 121+、Safari 15.4+，覆盖绝大多数现代浏览器。

方案二：调整HTML结构，利用兄弟选择器（兼容老浏览器） #

如果需要兼容不支持:has()的老浏览器，可以调整HTML结构，将导航移至所有目标元素之后，再通过兄弟选择器实现样式关联。

代码示例 #

/* 当目标元素激活时，高亮对应的锚点链接 */
section#foo:target ~ nav a[href="#foo"],
section#bar:target ~ nav a[href="#bar"] {
  color: #e53e3e;
  font-weight: bold;
  border-bottom: 2px solid #e53e3e;
}

/* 保留原有的target元素样式（可选） */
:target {
  border: 2px solid red;
}

<section id="foo">This is foo.</section>
<section id="bar">This is bar.</section>

<nav>
  <a href="#foo">Foo</a>
  <a href="#bar">Bar</a>
</nav>

说明：

• 利用CSS的后续兄弟选择器~，当目标元素被标记为:target时，选中后续导航中对应的锚点链接。
• 兼容性极佳，支持所有支持:target选择器的浏览器（IE9及以上）。

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