当前位置：文江博客话题详情

使用 css 复制 html 元素

发布于 2024-07-10 03:02:17 字数 298 浏览 4 评论 0原文

我一直在提交一个网页的设计，我试图正确地实现它。此设计包含在整个页面上部分或完全重复的导航元素 - 特别是，指向主要 3 个导航类别的链接在页面上出现不少于 4 次。

我不是网页设计专家，但我不喜欢在 html 中重复相同的内容。我可以使用 CSS 使我的 html 包含格式合理的单个导航链接列表，但标准浏览器视图包含多个部分重复项吗？

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

编辑：实际上生成导航链接不是问题; 我正在寻找清理输出的 html

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ら栖息 2024-07-17 03:02:17

简短的回答：不。

长答案：不是真的，

存在几个 CSS 选择器 :before 和:after 可以用于这种目的，但它们的内容是有限的，并且它们的实现还不是跨浏览器安全的。

恕我直言，这样做可能是不明智的，因为样式（实际上是内容）现在可能看起来相同，但不能保证以后会一样，而且这种内容是内容并且正确属于在标记中而不是在样式中。如果您不喜欢服务器端包含模型（这很好），我可能会寻求 JS 来帮助您复制标记，并寻求 CSS 来帮助您保持一致的样式，但我认为您不一定会走上一条富有成果的道路。

回复收藏 0 原文

枯寂 2024-07-17 03:02:17

您可以通过将属性中的内容投影为伪元素来复制它：

.duplicate::before,
.duplicate::after {
    content:attr(title);
    display:block;
}

<div class="duplicate" title="text to duplicate"></div>

You could duplicate it by projecting content from an attribute as pseudo elements:

.duplicate::before,
.duplicate::after {
    content:attr(title);
    display:block;
}

<div class="duplicate" title="text to duplicate"></div>

回复收藏 0 原文

献世佛 2024-07-17 03:02:17

有点可能，但仍然不确定您是否想要

并且提出了一些根据上下文而变化的严峻挑战。

一个问题是您声明的目标是减少 html 混乱和冗余。但是，要拥有链接，您仍然需要有一个锚元素 () 作为链接的根。

尽管如此，您可以使用当今的浏览器执行类似操作的一种方法（现在伪元素得到了更广泛的支持）是将文本与 a 分离，从而留下 <代码中的 em> 空锚点。因此，代码中仍然有 HTML a，但消除了任何多余的文本。这到底有多大用处？我的想法不太一样。特别是如果您正在处理内联链接，这些链接是文本的一部分，因为您要做的就是通过伪元素向这些链接添加文本，例如就像：

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

看看这个小提琴示例。

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

Sort of Possible, But Still Not Sure You Would Want To

And poses some serious challenges which varies depending on the context.

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.

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';
}

Look at this fiddle example.

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.

回复收藏 0 原文

遗心遗梦遗幸福 2024-07-17 03:02:17

简短的回答不，在CSS中你不能创建内容或多次显示它。
通常这种重复的内容是通过服务器端技术（PHP、JSP、ASPX）等来处理的。
如果您的网站是静态内容（没有服务器端处理），那么您最好的选择就是复制并过去。

使用 javascript 可以做到这一点，但会有很多缺点，最好复制和粘贴。

回复收藏 0 原文

万劫不复 2024-07-17 03:02:17

恕我直言，这是不可能的。
我的解决方案是添加一个小型 PHP 或其他引擎，自动在需要的位置呈现菜单。这样你的代码就DRY。

回复收藏 0 原文

冷清清 2024-07-17 03:02:17

您可以查看服务器端包含，但是 Germstorm 已经说这可能最好通过一个小的 PHP 脚本来完成。

回复收藏 0 原文

ι不睡觉的鱼゛ 2024-07-17 03:02:17

如果您仅在单个文件中重复链接的代码{您将其用作模板并动态推送内容}，那么这不会有太大问题。

我不会假设您使用哪种服务器端技术，但您可以使用 JavaScript 快速管理它。编写链接的 HTML，将其分配给 JavaScript 变量，然后在需要的地方回显它。

另外，如果您碰巧使用 scriptalicious，那么您很幸运！您可以使用 Builder 来动态创建 DOM 元素。

回复收藏 0 原文

雨轻弹 2024-07-17 03:02:17

正如其他人所说，如果您可以使用一些服务器端代码。如果由于某种原因无法使用服务器端代码，那么最好的选择是编写一个小程序来读取您独特的 html 页面并添加重复的 HTML。这比手动复制和粘贴更快更容易，尤其是当您有很多页面时。如果您在处理过程中向页面添加一些带有特殊标识符字符串的 html 注释标记，那么您将来还可以在更改页面结构时使用这些标记来快速查找和替换所有常见的 HTML。

但是像这样预处理 html 页面是一件很痛苦的事情，所以不要这样做，除非你不能在服务器端这样做。

回复收藏 0 原文