使用 css 复制 html 元素

问题描述

我一直在处理我正在尝试正确实施的网页设计.此设计包含在整个页面中部分或全部重复的导航元素 - 特别是，指向主要 3 个导航类别的链接在页面上出现不少于 4 次.

I've been handing a design for a webpage which I'm trying to implement correctly. This design contains navigation elements which are partially or entirely duplicated all over the page - in particular, links to the main 3 categories for navigation are present on the page no less than 4 times.

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

I'm no web design expert, but I don't like the idea of having the same content duplicated in the html. Can I use CSS so that my html contains a single list of navigation links in a sane format, but the standard browser view contains multiple partial duplicates?

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

(Also, assuming this is possible, is it a good idea? or would I be better just getting used to the idea that my html is going to contain the same links 4 times?)

实际上生成导航链接不是问题；我正在寻找清理输出html

Actually generating the nav links is not an issue; I was looking to clean up the output html

推荐答案

有点可能，但仍不确定您是否愿意

并带来一些严重的挑战，具体取决于上下文.

一个问题是您的既定目标是减少 html 的混乱和冗余.但是，要获得链接，您仍然需要有一个锚元素 (<a></a>) 作为链接的根.

One problem is that your stated goal is to reduce html clutter and redundancy. However, to have a link, you still need to have an anchor element (<a></a>) as the root for the link.

尽管如此，一种方法你可以用今天的浏览器做类似的事情(现在更普遍地支持伪元素)是将文本与 a 分开在您的代码中留下一个 empty 锚.所以你仍然在代码中有 HTML a，但消除了任何多余的 text.这真的有用吗?不是我的想法.特别是如果您正在处理 内联 链接，这些链接 是文本的一部分，因为您要做的就是通过伪元素将文本添加到这些链接中，喜欢:

Nevertheless, one way you could do something like that with today's browsers (now that pseudo-elements are more generally supported) is to divorce the text from the a which leaves an empty anchor in your code. So you still have the HTML a in the code, but eliminates any redundant text. How useful really is that? Not very is my thought. Especially if you are dealing at all with inline links that are part of the text, because what you would do is then add text to those links via the pseudo-element, something like:

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

查看这个小提琴示例.

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

However, there is another way that reduces HTML further, but has some other severe limitations. You could have links in the text itself (let's say), which allows for relevant real content wording in those. However, each of those can have two (max at present) pseudo-elements associated that could "extend" to be separate links in headers, footers, etc. Look at this fiddle example. Obviously, this requires you to be able to precisely locate those links (perhaps using position: fixed as the example has), which can be challenging. A big issue, however, is that search engines are not going to pick up those extra links or their text, and screen readers are not either, so your "main navigation" actually becomes invisible to some extent. That would seem to be undesirable to me, but it does indeed limit your html redundancy.

这篇关于使用 css 复制 html 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！