使用css复制html元素 [英] using css to duplicate html elements
问题描述
我一直在为一个网页设计，我想要正确实现。此设计包含在页面上部分或完全重复的导航元素 - 特别是，导航的主要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?)
编辑：实际生成nav链接不是一个问题;我正在寻找清理输出html
Actually generating the nav links is not an issue; I was looking to clean up the output html
推荐答案
可能的排序，但仍然不确定你想要
Sort of Possible, But Still Not Sure You Would Want To
And poses some serious challenges which varies depending on the context.
一个问题是，你的声明的目标是减少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 的文字，在您的程式码中留下一个空的锚点。因此，您仍然在代码中具有HTML a ，但是会删除任何冗余的文本。这有多有用呢？不是我的想法。特别是如果你正在处理的是是文本的一部分的 链接，因为你会做的是通过伪元素添加文本到这些链接例如：
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 ，但还有其他一些严重的限制。你可以在文本本身有链接（让我们说），它允许在那些相关的真实内容写法。但是，每个都可以有两个（目前最多）伪元素关联，可以扩展为页眉，页脚等中的单独链接。查看这个小提示示例。显然，这需要你能够精确定位这些链接（可能使用 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元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
