CSS-当id链接到使用锚点时突出显示一个div？答案

【问题标题】：CSS- Highlight a div when the id is linked to using an anchor?CSS-当id链接到使用锚点时突出显示一个div？
【发布时间】：2012-06-23 22:07:25
【问题描述】：

我正在尝试做的是突出显示具有某个 id 的 div，当它被另一个页面 IE 上的锚引用时：

用户点击链接href="qw.html#test"，当页面加载完毕，然后是id="test"的div 突出显示，以便用户可以清楚地看到它。

我确信我已经看到了一个 CSS3 示例，其中一个 div 被链接到时会突出显示。还是 JavaScript？

【问题讨论】：

【解决方案1】：

JavaScript 可用于动态添加/更改 div 的类：

如果你有：

<div id="test"></div>

Javascript函数，点击锚点执行：

document.getElementById("test").className += " highlighted";

结果：

<div id="test" class=" highlighted"></div>

【讨论】：

【解决方案2】：

您可以在 JavaScript 中执行此操作。请参阅How to get the anchor from the URL using jQuery? 了解如何从 URL 获取锚点，然后它可以很简单，例如

document.getElementById(hash).style.backgroundColor="Yellow";

【讨论】：

【解决方案3】：

你需要使用:target伪类：

:target {
   background-color: #ffa;
}

【讨论】：

@DavidThomas，这可以为 any 目标完成吗？还是每次都要指定id？
@DAE：“目标”由 URL 片段标识符（#elementID）标识，因此它仅适用于具有 id 且其 id 位于网址如下：http://example.com#elementID
@DavidThomas 实际上最后我尝试了 a:target 并且它对我的目的很好:)