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

Question

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

Answer 1

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

像这样在 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 或跨越您的 id 目标，然后将目标选择器与元素结合使用。效果是<p>元素内部的所有内容id="targetLink"都将被赋予样式。

使用像这样的 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 或跨越您的 id 目标，然后将目标选择器与 aa 类结合使用。class="here"效果是元素内部的所有元素都id="targetLink"将被赋予样式。

---

这是使用这种技术获得黄色渐变的简洁教程。