Question

假设您的页面很长。您的链接位于顶部的<nav>中。但是随着读者向下滚动，它从顶部移开。当他们到达文章末尾时，您不想让它们滚动回到顶部，而是希望将相同的<nav>内容放在页脚中。

无需在源代码中重复说明，是否可以通过 CSS 这样的方式使元素出现在多个位置？

（PS，这只是一个示例，因此我们需要具体参考。对于这种设计的可用性/用户体验论据，我并不特别感兴趣；当然，更常规的解决方案是将{{ 1}}在滚动时保持在屏幕上。）

Answer 1

不。元素是在DOM中创建元素的HTML领域。 CSS仅表示这些元素，而不能创建它们，不，::before等不是同一回事。是的，javascript可以将元素插入DOM，但这不是问题。

Answer 2

撇开用户体验和可访问性的争论，答案是肯定的。排序。

您可以使用:after和position:absolute将css content添加到锚标记，然后将其放置在页面底部（bottom: 0）。浏览器（据我测试）将锚的position:absolute :after内容视为锚的一部分（这意味着您可以单击它，即使原始锚的命中框附近也不在话下:after content）。

这里的陷阱是：所有父元素上都不能有position:relative或position:absolute。如果这样做的话，:after的内容将绝对固定在该父元素的底部。

在布局方面-:after的内容将与原始锚点的文本末尾对齐。如果您可以算出如何使文本左移，使其直接出现在原始链接的下方，请告诉我;）

这仅适用于平面导航样式（无下拉菜单）。

您需要将链接文本移动到锚点的属性（我选择了title标签）中，以使content能够回显。而且因为我不喜欢属性内的相同文本以及HTML中的相同文本，所以我从锚点中删除了该文本。

nav a:after {
  position: absolute;
  content: attr(title);
  bottom:0;
}

nav a:before {
  content: attr(title);
}

body,
html {
  height: 100vh;
}

<nav>
  <a href="#1" title="1"></a>
  <a href="#2" title="2"></a>
  <a href="#3" title="3"></a>
</nav>

Answer 3

我相信您可能对CSS的用途及其用途有误解。

CSS提取HTML，使其漂亮，然后将其显示给用户。而已。话虽如此，CSS在过去的几年中取得了长足的进步，现在我们可以制作动画，转场等了。但是，这些仍然在“使它变得漂亮”。

一旦进入“复制”领域，它就不够用了。只有Javascript可以修改这样的页面，但是您很可能是：

出于某种原因不希望使用Javascript
希望您可以轻松地做到这一点

好，有个好消息。您无需使用Javascript就可以完成此操作，而只需使用HTML / CSS即可。

为此，您需要有两个<nav>元素。幸运的是，使它看起来不错的大部分工作将由共享的CSS类来完成。

不幸的是，为了使它们保持同步而不必在进行更改时同时编辑两个<nav>元素，您需要使用Javascript。

CSS可以使元素出现两次吗？

3 个答案: