使用带有 CSS 的锚链接显示附加信息

Question

HTML：

<article>
  <h1>First Heading</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, suscipit, itaque. Cumque asperiores vel quae necessitatibus eos? Sequi odit dolores placeat voluptatibus ea, beatae, praesentium quod deserunt hic enim veniam.</p><br>

  <a href="#sectionTwo">Read more...</a>

  <article id="sectionTwo">
    <h1>Second Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem fugiat libero molestiae, eaque adipisci sit qui odit assumenda voluptas laborum veniam ut animi ratione natus, deleniti, facere iste ea necessitatibus?</p>
  </article>

</article>

CSS：

#sectionTwo {
  display: none;
}
#sectionTwo:target {
  display: block;
}

为什么第二个h1 比第一个小，它们的权重不应该相同吗？同样呈现为纯h1 标签，每个标签都有自己的article？

Answer 1

文章中的 h1 被视为子标题，并以小于正常大小显示。在您的示例中，第二个 h1 在 nested 文章中，因此它甚至比这更小。

第一个 h1 也小于直接在正文中的 h1。示例：

<h1>Top Heading</h1>

<article>
  <h1>First Heading</h1>

  <article id="sectionTwo">
    <h1>Second Heading</h1>
  </article>

</article>

关于你的第二个问题：不知道。有什么理由怀疑它可能无法以最佳方式工作吗？
我经常在 Google 上找到的网页没有我第一次访问时要查找的信息，这些信息隐藏在“阅读更多”链接后面。