css - 使用 css 复制 html 元素

Question

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

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

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

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

score 18 · Accepted Answer

简短的回答：没有。

长答案：不是真的，

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

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

score 13 · Accepted Answer

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

并提出了一些严重的挑战，这些挑战因环境而异。

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

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

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

看看这个小提琴的例子。

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

score 9 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

减少 HTML 大小和带宽占用

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

保持 HTML 漂亮

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

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

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

score 0 · Accepted Answer

可以使用::before和::after。但是，它只能显示文本（不能显示 HTML 元素）。如果它可以显示 HTML 元素，那么将存在重大安全风险......

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

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

score -3 · Accepted Answer

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

css - 使用 css 复制 html 元素

11 回答 11

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

Related

Reference