多<a>元素作为锚点时，如何用:target伪类高亮指定<h1>元素

我们有时候需要通过带#后缀的URL跳转到页面指定区域，通常会用到多个空<a>标签做锚点，示例HTML代码如下：

<p><a href="#sun">Lorem</a> ipsum.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem <a href="#yellow">ipsum</a> dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <a href="#hot">sit</a> amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<a id="yellow"></a>
<a id="hot"></a>
<h1 id="sun">Sun</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>

点击这些链接跳转后，希望用:target伪类高亮<h1 id="sun">Sun</h1>元素，但目前只有href="#sun"的链接能生效，怎么让href="#hot"和href="#yellow"也实现同样的高亮效果？当前尝试的CSS代码如下：

/* works for href="sun" */
:target { outline: 1px solid red; }

/* my attempt to make it work for href="hot". Doesn't work.
And there is still a question how to make it work for href="yellow" */
:target + h1 { outline: 1px solid red; }

解决方案 #

你之前用的相邻兄弟选择器+只能选中紧挨着的下一个兄弟元素，但#hot和h1#sun之间没有直接相邻，所以失效。改用通用兄弟选择器（~）就能解决，它可以选中当前元素之后所有的同级兄弟元素，不管中间隔了多少个元素。

修改后的CSS代码：

/* 直接锚定到sun时高亮 */
#sun:target {
  outline: 1px solid red;
}

/* 锚定到yellow或hot时，高亮后面的sun元素 */
#yellow:target ~ #sun,
#hot:target ~ #sun {
  outline: 1px solid red;
}

或者更简洁的合并写法：

#sun:target,
#yellow:target ~ #sun,
#hot:target ~ #sun {
  outline: 1px solid red;
}

这样不管点击哪个锚点链接，最终都会让<h1 id="sun">Sun</h1>被红色外框高亮。

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