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

Shortcut to the second instance of a class in css

本文关键字：实例 快捷方式 第二个 css      更新时间：2023-09-26

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

这个页面没有很多漂亮、独特的元素，所以我可以使用www.thepage.com#yayforcs，而是有同一元素的多个实例。

有什么方法可以链接到网页中类的第x个实例吗？

没有办法（至少在不使用大量JS代码的情况下）在多个元素上使用相同的ID，也没有办法使用带标签的URL来指向正确的元素。

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

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

  2. ID类型属性的特殊之处在于，没有两个这样的属性可以具有相同的值；无论文档语言是什么，ID属性都可以用来唯一标识其元素。-http://www.w3.org/TR/CSS2/selector.html#id-选择器

如果你想直接链接到内容的特定部分，请为每个部分使用唯一的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

如果你的CSS样式应用于你当前的ID，你必须改变它并使用类。

如果您的问题是如何从一个页面跳到其他页面上特定类的第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来定位页面上的元素，但严格来说，这是为了对它们应用样式，而不是跳转到它们。

相关文章：