使用CSS复制HTML元素

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

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

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

尽管如此, 单程 在今天的浏览器中(现在更普遍地支持伪元素),您可以这样做,就是将文本与 a 留下一个 空的 在代码中锚定。所以你还有HTML 一 在代码中,但消除了任何冗余 文本 . 这真的有多有用?我的想法不是很好。尤其是当你和 内联的 链接 是文本的一部分 ,因为您要做的是通过伪元素向这些链接中添加文本,如下所示:

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

看 this fiddle example .

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

简短回答:不。

长话短说:不是真的,

有几个CSS选择器 :before and :after 它可以用于这类目的,但其内容有限,而且其实现还不安全。

imho想这样做可能是不明智的,因为样式(实际上是内容)现在看起来可能是一样的,但不能保证以后会是一样的,而且这种内容 是内容 并且正确地属于标记而不是样式。如果您不喜欢服务器端的include模型(这很好),我可能会找JS来帮助您复制标记,而CSS来帮助您保持一致的风格,但我认为您不一定要走一条富有成效的道路。

简短回答否,在CSS中,不能创建内容或多次显示内容。 通常,这些重复的内容是通过服务器端技术(PHP、JSP、ASPX)等来处理的。 如果您的站点是静态内容(没有服务器端处理),那么您的最佳选择就是复制和过期。

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

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

你可以调查一下 server-side includes 不过,正如Germstorm已经说过的,最好用一个小的PHP脚本来完成。

如果只在一个文件中重复链接的代码将其用作模板并动态地推送内容,那么问题就不会太大。

我不会假设您使用的是哪种服务器端技术,但您可以使用JavaScript快速管理这一点。为链接编写HTML,将其分配给一个javascript变量,并在需要时将其回送。

另外,如果你碰巧使用脚本,那你就走运了!你可以使用 建设者 到 dynamically create DOM elements .

正如其他人所说,如果您可以使用一些服务器端代码。如果出于任何原因不能使用服务器端代码,最好是编写一个小程序,它可以读取您独特的HTML页面并添加重复的HTML。这比手工复制和粘贴要快和容易,尤其是当你有很多页面的时候。如果您在处理过程中向页面添加了一些带有特殊标识符字符串的HTML注释标记,将来您还可以使用这些标记快速查找和替换所有常见的HTML(如果您更改了页面的结构)。

但是像这样的预处理HTML页面是一种正确的痛苦,所以不要这样做,除非您不能在服务器端这样做。

你说你想清除输出HTML。但是为什么呢?我假设您要么想要减少HTML的大小和带宽占用,要么像源代码一样保持HTML的美观。

减少HTML大小和带宽占用

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

保持HTML的美观

也许你想把你的HTML变成一个模板引擎。有几种选择,比如 Mustache.js 和 Underscore . 但是,您将招致性能损失,因为JS处理还有一个额外的步骤。

无论如何,我认为你在处理错误的问题。仅仅因为HTML是[有点]可读的,并不意味着它应该被当作源代码来对待。我经历过这个过程,现在我只是把HTML当作浏览器的“汇编代码”。使用更好的模板语言,比如 Slim ,帮助实施此POV。

这并不意味着你应该像对待垃圾一样对待你的HTML。它只是意味着它的输出可读性不是你作为一个程序员的问题,你应该担心写的好和可读性。 视图模板 使用 可靠的模板引擎 . 毕竟,您希望HTML是浏览器快速呈现的最佳方式。如果它意味着代码重复,没有空格,那就这样吧。

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

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

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

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