如何用纯 HTML/CSS 实现跨页面文本复用-html教程-PHP中文网

纯 HTML 和 CSS 无法真正“引用”其他 HTML 文件中的文本内容；唯一可行的方案是将共享文本统一定义在外部 CSS 文件中，再通过 ::before 或 ::after 伪元素注入到各页面的对应元素里。

纯 html 和 css 无法真正“引用”其他 html 文件中的文本内容；唯一可行的方案是将共享文本统一定义在外部 css 文件中，再通过 `::before` 或 `::after` 伪元素注入到各页面的对应元素里。

在静态网站开发中，常有「一处修改、全局同步」的需求——例如页脚版权信息、联系邮箱或公告文案需在所有页面保持一致。遗憾的是，HTML 和 CSS 本身不具备跨文件内容读取能力：你无法像

这样直接引用另一 HTML 文件中的 DOM 节点（该语法无效，也不被浏览器支持）。

✅ 正确做法：将共享文本抽离至外部 CSS 文件（如 shared.css），利用 CSS 的 content 属性配合伪元素动态插入：

/* shared.css */
.shared-footer::before {
  content: "© 2024 MyCompany. All rights reserved. Email: contact@mycompany.com";
}

然后在每个 HTML 页面中引入该 CSS，并添加对应元素：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

<!-- index.html & about.html & contact.html 等所有页面 -->
<link rel="stylesheet" href="shared.css"><footer><p class="shared-footer"></p>
</footer>

这样，只需修改 shared.css 中的 content 值，所有引用该样式的页面便会自动更新显示内容。

⚠️ 注意事项：

content 属性仅对 ::before 和 ::after 伪元素有效，且目标元素必须为可生成伪元素的容器（通常为 display: inline 或 block 的元素）；
content 中的文本不支持换行符（\a 在部分浏览器受限），如需多行，请使用多个伪元素或改用（但会带来语义与 SEO 问题）；
此方案不适用于需要 SEO 索引或屏幕阅读器朗读的关键文本——因为伪元素内容默认不被搜索引擎抓取，也不属于 DOM 可访问树（accessibility tree）；
若需语义化、可选中、可索引的共享文本，JavaScript（如 fetch() 加载片段）或服务端包含（SSI）、静态站点生成器（如 Jekyll 的 {% include %}）才是可靠选择。

总结：纯前端静态方案下，“CSS content + 外部样式表”是唯一符合要求的 HTML/CSS 解法，本质是“文本集中定义、样式驱动渲染”，而非“HTML 内容复用”。理解其局限性，有助于在项目初期合理选型。