在网页设计中，链接是非常有用的，它可以使用户快速导航到页面上的特定位置。通过使用HTML代码中的锚点，我们可以直接链接到指定的元素，而无需滚动页面来查找该元素。
但是，如何让链接后的元素突出显示？本文将为您介绍在链接到具有锚点的ID时，如何使用CSS对其进行高亮显示。
原理
当浏览器接收到包含锚点的URL时，它将尝试将视口滚动到与锚点匹配的元素。通常情况下，浏览器会自动添加:target伪类，以便用户知道当前页面已经跳转到了哪个元素。
因此，我们可以利用这一点，通过CSS选择器来选中目标元素，并对其应用样式，从而实现高亮显示的效果。
实现步骤
1. 创建带有锚点的ID
我们需要为要进行高亮显示的元素创建一个唯一的ID，并在链接中包含该ID作为锚点。例如，在以下HTML代码中，我们为要高亮显示的元素创建了一个ID highlight：
-- -------------------- ---- -------
------
-----
----
------ ------------------------------------
------ ----------------------------
-----
------
---- ------------------- -- --- ------- -- ---------------
---- --------------- -- ------- -------------
-------在上面的例子中，我们可以看到两个链接，第一个链接指向带有ID highlight的元素，并且该元素将被高亮显示。
2. 使用CSS选择器
为了将样式应用于选定的目标元素，我们需要使用:target伪类来选择带有锚点的ID。然后，在该选择器中定义要应用于目标元素的样式。
例如，以下CSS代码将使指定ID的元素变成黄色背景：
#highlight:target {
background-color: yellow;
}我们可以通过将这些样式添加到页面的<style>标记内或外部的CSS文件中来实现。
示例代码
下面是完整的HTML和CSS代码示例，可用于演示如何在链接到带有锚点的ID时高亮显示一个div：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- - --- ---- --- -- -- ------ -- ----- -- --------------
-------
----------------- -
----------------- -------
-
--------
-------
------
-----
----
------ ------------------------------------
------ ----------------------------
-----
------
---- ------------------- -- --- ------- -- ---------------
---- --------------- -- ------- -------------
-------
-------结论
使用CSS可以轻松地在链接到带有锚点的ID时高亮显示一个div。这是一个非常有用的技巧，可以为用户提供更好的导航体验。我们可以通过HTML中的锚点和CSS中的:target伪类来实现该效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25906