Question

我有一个问题，我必须链接到我无法控制的网页中的特定部分。

我可以使用www.thepage.com＃yayforcss而不是拥有许多漂亮，独特的元素，而是拥有相同元素的多个实例。

有没有办法链接到网页中某个类的第x个实例？

Answer 1

没有办法（至少不使用一些大规模的JS代码）在多个元素上使用相同的ID，并使用带有＃标签的URL指向正确的元素。

W3.org关于ID的html和css规范



id属性为元素分配唯一标识符（可以由SGML解析器验证）。 - http://www.w3.org/TR/html401/struct/global.html#h-7.5.2



使ID类型属性特殊的原因是没有两个这样的属性可以具有相同的值;无论文档语言如何，ID属性都可用于唯一标识其元素。 - http://www.w3.org/TR/CSS2/selector.html#id-selectors

如果您希望直接链接到内容的特定部分，请为每个部分使用唯一ID：

<div id="section_1">some content</div>
<div id="section_2">some content</div>
<div id="section_3">some content</div>
<div id="section_4">some content</div>

然后使用以下方式访问此部分：

www.example.com/page/#section_1
www.example.com/page/#section_2
www.example.com/page/#section_3
www.example.com/page/#section_4

如果您有适用于当前ID的CSS样式 - 您必须更改它并使用类。

Answer 2

如果您的问题是如何从一个页面跳到另一个页面上特定班级的第n个实例，那么简单的答案就是您不能。为此，您必须拥有ID。

如果你想跳到同一页面，那么有一个相对简单的方法。使用getElementByClassNames获取具有特定类的元素，然后使用scrollIntoView跳转到该元素。

function scroll_to_nth_of(class_name, n) {
    document.getElementsByClassName(class_name)[n].scrollIntoView();
}

然后

<a onclick="scroll_to_nth_of('my-class', 1)">Show me the second my-class!</a>

或同等的。

在Chrome中，您可以使用scrollIntoViewIfNeeded。而scrollIntoView将始终将元素弹出到页面的最顶部（或者，如果您将参数传递给false，则为底部），如果元素在某处已经可见，则scrollIntoViewIfNeeded将不会滚动页面。

顺便说一句，CSS与此问题无关。你确实可以使用CSS来定位页面上的元素，但严格来说是为了对它们应用样式，而不是跳转到它们。

css中类的第二个实例的快捷方式

2 个答案:

W3.org关于ID的html和css规范