使用css复制html元素

我一直在为一个我试图正确实现的网页设计.此设计包含在整个页面上部分或全部重复的导航元素 - 特别是,页面上显示的主要3个导航类别的链接不少于4次.

我不是网页设计专家,但我不喜欢在html中复制相同内容的想法.我可以使用CSS,以便我的html包含一个健全格式的导航链接列表,但标准浏览器视图包含多个部分重复项？

(另外,假设这是可能的,这是一个好主意吗？或者我会更好地习惯我的html将包含相同链接4次的想法？)

编辑:实际上生成导航链接不是问题; 我当时想要清理输出html

简答:不.

答案很长:不是,

存在一些CSS选择器:before和:之后可以用于这种目的,但是它们的内容是有限的,并且它们的实现还没有跨浏览器安全.

恕我直言,想要这样做可能是不明智的,因为风格(实际上内容)现在可能看起来一样,但是不能保证它会在以后,而且这种内容是内容并且正确地属于标记而不是造型.如果您不喜欢服务器端包含模型(这很好),我会期待JS帮助您复制标记,并且CSS可以帮助您一致地设置样式,但我认为您不一定会走上富有成效的道路.

可能的,但仍然不是你想要的

并带来一些严重的挑战,具体取决于具体情况.

一个问题是你声明的目标是减少html杂乱和冗余.但是,要获得链接,您仍需要使用anchor元素()作为链接的根.

然而,有一种方法可以用今天的浏览器做这样的事情(现在更普遍支持伪元素)是将文本与代码中a的空锚离开.所以你仍然a在代码中有HTML ,但是消除了任何冗余的文本.真的有用吗？不是我的想法.特别是如果你正在处理作为文本一部分的内联链接,那么你要做的就是通过伪元素向这些链接添加文本,例如:

a[href='#oneUrl']:before {
    content: 'your anchor text';
}

看看这个小提琴的例子.

但是,还有另一种方法可以进一步减少HTML,但还有其他一些严重的限制.你可以在文本本身中有链接(比如说),它允许相关的真实内容措辞.但是,每个都可以有两个(当前最大)伪元素关联,可以"扩展"为页眉,页脚等单独的链接.看看这个小提琴示例.显然,这要求您能够精确定位这些链接(可能使用position: fixed示例),这可能具有挑战性.然而,一个大问题是搜索引擎不会获取那些额外的链接或文本,屏幕阅读器也不会,因此您的"主导航"实际上在某种程度上变得不可见.这似乎对我不利,但确实限制了你的html冗余.