html - 如何将 CSS 样式添加到 HTML 中的焦点锚点

Question

在第 1 页有一个链接，可将您带到第 2 页的某个点

<a href="page2.html#position">MY TEXT HERE</a>

这会将您直接带到第 2 页上的锚点（位置），代码如下

<a name="position"> MORE TEXT HERE</a>

现在，我的问题是当 #position 在 URL 中时如何更改文本和背景颜色？

例如：www.domainname.com/page2.html#position

这是我使用但不起作用的 CSS：

#position {
color:#ff0000;
background-color:#f5f36e;
}

先感谢您！

score 12 · Accepted Answer

使用:target选择器：

a:target, /* or simply */
:target {
    /* CSS to style the focused/target element */
}

您最好使用id特定元素的来接收焦点，因为如果没有完全弃用，命名锚似乎已被删除。

参考：

score 3 · Accepted Answer

您可以使用 CSS3伪选择器： http:target ://blog.teamtreehouse.com/stay-on-target

另外，不要使用旧的神话<a name="destination">...</a>，您只需要id跳到您想要跳转到的部分，例如<section id="destination">...</section>

score 1 · Accepted Answer

<a href="#position2" id="position">MY TEXT HERE</a>
...
<a name="position2" id="pos2"> MORE TEXT HERE</a>

...在CSS中：

a[name=position2]:target{     
    background-color:green;
}

score 0 · Accepted Answer

尝试使用

<a name="position" class="position"> MORE TEXT HERE</a>

并在 CSS 中使用

.position {
color:#ff0000;
background-color:#f5f36e;
}

score 0 · Accepted Answer

为标签添加一个 id。

您可以在此处查看如何使用您的示例

<a id="position" href="#position">MY TEXT HERE</a>

5 回答 5