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

Question

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

Answer 1

是的，有。

有个CSS伪class...:target.

The pseudo-class :target is used to style the target element of a URI containing a fragment identifier. For example, the URI

这意味着如果您给文本（或其他元素）一个 ID（#whatever），您可以指定当通过单击 link that..ahem 引用该元素时会发生什么...目标 href:

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

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

Is there any way to get text to highlight when you click on a # tag within the page?

html

css

highlighting