当您单击页面中的 # 标签时，有什么方法可以突出显示文本？答案

【问题标题】：Is there any way to get text to highlight when you click on a # tag within the page?当您单击页面中的 # 标签时，有什么方法可以突出显示文本？
【发布时间】：2016-02-22 19:24:02
【问题描述】：

就像在 wikia 上一样，当您单击参考编号时，它会在页面底部突出显示参考？我对编码很陌生，但我掌握得很好。只要让我知道是否可能，请给我一个例子。谢谢。

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/4176923/html-of-selected-text

标签： html css highlighting

【解决方案1】：

是的，有。

有一个 CSS 伪类...:target。

伪类:target 用于设置包含片段标识符的URI 的目标元素的样式。例如，URI

这意味着，如果你给文本（或其他元素）一个 ID（#whatever），你可以指定当点击一个链接引用该元素时会发生什么..ahem...以@为目标987654323@:

#one:target {
  background: red;
}
#two:target {
  background: green;
}
#three:target {
  background: yellow;
}
.wrap div {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 1em;
  background: #000;
}
a {
  display: inline-block;
  padding: .5em;
  background: lightgreen;
  margin: 1em;
  color: green;
  text-decoration: none;
}

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>

<div class="wrap">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

【讨论】：

我是否必须为每个参考文献制作一个？我每页有超过 70 多个参考文献。每次我尝试将其添加到我的页面时，它都会破坏布局。
好的，所以我一直在调整它（因为 a 元素使页面上的所有链接都变成绿色），我觉得我已经接近正确了，但它仍然没有很有效。有什么建议吗？
坦率地说，我认为您正在寻找的东西可能最好由 Javascript 处理，但如果没有演示，很难进一步评论。
我现在已经突出显示了文本，但我唯一希望它突出显示的时间是单击链接时。你还有什么可以提供的帮助吗？
好吧，我终于想通了。我完全歪曲了你给我的CSS。谢谢。