“:target”伪类，当多个“a”元素用作目标时

Question

有时，我们可能需要使用多个不同的

#

-tail URL 提供网页上特定部分的路径，据我所知，对于此任务，我们必须使用多个空白

<a>

元素。这是一个例子：

<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>

“跳转”之后（即用户单击其中一个超链接后），我更愿意使用

<h1>

伪类突出显示

Sun

元素

:target

。

但是如何让它不仅适用于

href="sun"

，还适用于

href="hot"

和

href="yellow"

？

/* 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; }

Answer 1

具体说明目标伪类的内容，如以下代码片段所示：

<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>
<style>
   :target,
  .hot:target+h1,
  .yellow:target+a+h1 {
    outline: 1px solid red;
  }
</style>

这取决于您正在寻求的解决方案的普遍性。显然，如果有很多同义词，那么将所有这些 + 放入其中会很乏味，所以这可能只是一个开始。

Answer 2

使用通用兄弟选择器

:target ~ h1

：

:target:not(a) {
  outline: 1px solid red;
}

:target ~ h1 {
  outline: 1px solid red;
}

<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>