使用 css 复制 html 元素

Posted 2023-04-13

【中文标题】使用 css 复制 html 元素

【英文标题】：using css to duplicate html elements

【发布时间】：2010-09-25 20:19:10

【问题描述】：

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

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

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

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

【问题讨论】：

你能给我们一些代码吗？你的问题很难理解

【参考方案1】：

简短回答：不。

长答案：不是真的，

有几个 CSS 选择器 :before and :after 可用于此类目的，但它们的内容有限，并且它们的实现还不是跨浏览器安全的。

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

【讨论】：

恕我直言，这不是行为（js），但绝对我认为他是对的：从逻辑上讲，它不是真正的内容，但它属于您布置内容的方式（您只能为某些'复制菜单'详细的样式表）。

我同意它不属于 JS（我建议将此作为一种解决方案，而不是作为您遵循的答案），尽管我可以看到您指出（和灰色区域）这种感觉就像布局一样，它只在那个领域内，只要它是不可变的。你不能依赖它。

来自未来的你好，你需要看到我们今天使用这些伪元素所做的“只有一个元素的任何事情”，即使它们受到很多限制。

【参考方案2】：

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

并提出一些严重的挑战，具体取决于上下文。

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

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

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

看看this fiddle example。

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

【讨论】：

我已将赏金授予此答案，因为摘要答案似乎是正确的，并且该建议可能尽可能接近。

【参考方案3】：

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

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

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

【讨论】：

这其实很聪明。

这太棒了，正是我需要用 css 和一个额外的属性来完成胶印效果

【参考方案4】：

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

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

【参考方案5】：

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

【参考方案6】：

您可以查看server-side includes，但是正如 Germstorm 已经说过的那样，这可能最好通过一个小的 PHP 脚本来完成。

【参考方案7】：

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

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

另外，如果你碰巧使用的是 scriptalicious，那你就走运了！您可以使用 Builder 来dynamically create DOM elements。

【参考方案8】：

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

但是像这样预处理 html 页面是一种痛苦，所以除非你不能在服务器端这样做，否则不要这样做。

【参考方案9】：

你说你想清理输出的 HTML。但出于什么原因？我假设您要么希望减少 HTML 大小和带宽占用，要么保持 HTML 漂亮，就像源代码一样。

减少 HTML 大小和带宽占用

实现此目的的最佳方法是使用 HTTP 压缩。大多数 HTTP 服务器都可以配置为以这种方式提供内容。检查您的服务器文档。

保持 HTML 漂亮

也许你想把你的 HTML 变成一个模板引擎。对此有多种选择，例如Mustache.js 和Underscore。但是，您会受到性能损失，因为 JS 处理需要额外的步骤。

---

无论如何，我认为您正在处理错误的问题。仅仅因为 HTML [有点] 可读，并不意味着它应该被视为源代码。我经历过这个，现在我只是将 HTML 视为浏览器的“汇编代码”。使用更好的模板语言，如 Slim，有助于执行此 POV。

这并不意味着您应该将 HTML 视为垃圾。这只是意味着它的输出可读性不是你作为程序员的问题，你应该担心使用可靠的模板引擎编写好的和可读的视图模板。毕竟，您希望 HTML 尽可能让浏览器快速呈现。如果这意味着代码重复且没有空格，那就这样吧。

【参考方案10】：

可以使用::before 和::after。 但是，它只能显示文本（不能显示 HTML 元素）。如果它可以显示 HTML 元素，那么就会有很大的安全风险......

我可能会在页面内注入 <script> 元素，例如使用恶意 JavaScript。

如果 CSS 能够做到这一点，那么诸如 Stylish 之类的 CSS 用户脚本扩展可能会很危险。

【讨论】：

复制某些内容会导致安全风险，而仅使用一份内容副本就不会存在这种风险？

【参考方案11】：

我认为您将使用 HTML 包含和 SSI 或服务器端包含在相同页面上合并相同的方法， 这是您将使用的格式。 <!--#include virtual="path to file/include-file.html" -->，始终在每个相似的页面中包含该文件.. 只需转到此链接..http://webdesign.about.com/od/ssi/a/aa052002a.htm