css - 使用 :target? 定位多个 id

Question

目前我使用<a href="id1"></a>使用 CSS :target 来定位特定标签。是否可以同时定位多个标签？所以#id1 和 id2 将同时在目标中，eexample。 ..index.html#id1#id2(或类似的东西？)

Answer 1

当您将 :target 选择器与标签样式或类样式结合使用时，您可以使用它来对多个元素进行样式化。

Like this on JSFiddle :

HTML
<p><a href="#targetLink">Jump to New content 1</a></p>

<div id="targetLink">
    <p>New content 1...</p>
    <p>New content 2...</p>
</div>

CSS
:target p
{
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

制作一个 div 或 span 你的 id 目标，然后将目标选择器与一个元素结合使用。效果是所有<p>在带有 id="targetLink" 的元素内部将被赋予样式。

通过类获得更多控制 like this JSFiddle :

HTML
<p><a href="#targetLink">Jump to New content 1</a></p>

<div id="targetLink">
    <p class="here">New content 1...</p>
    <p class="here">New content 2...</p>
    <p>New content 3...</p>
</div>

CSS
:target .here
{
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

同样，制作一个 div 或 span 您的 id 目标，然后将目标选择器与 a 类结合使用。效果是所有元素都带有 class="here"在带有 id="targetLink" 的元素内部将被赋予样式。

---

这里是 a neat tutorial to get a yellow fade using this technique .