纯 HTML/CSS 无法跨页面读取或引用其他 HTML 文件中的文本内容；唯一可行的“伪复用”方式是将公共文本提取至共享 CSS 文件，通过 ::before 或 ::after 伪元素注入，实现多页统一维护。
纯 html/css 无法跨页面读取或引用其他 html 文件中的文本内容；唯一可行的“伪复用”方式是将公共文本提取至共享 css 文件，通过 `::before` 或 `::after` 伪元素注入，实现多页统一维护。
在静态网站开发中，常有类似需求：例如页脚版权信息、联系邮箱或公告标语需在多个页面（如 index.html、about.html、contact.html）中一致显示，且希望仅修改一处即可全局生效。遗憾的是，HTML 和 CSS 均不具备跨文件内容导入能力——CSS 无法读取 HTML 的 DOM 结构，HTML 也没有原生 <include> 或 src 文本属性（如 <div src="index.html#mytext"> 是无效语法，浏览器会忽略）。
✅ 正确做法：将文本“下沉”至 CSS，而非试图从 HTML 中提取
创建一个共享样式表（如 shared.css），定义带 content 的伪元素类：
/* shared.css */
.footer-text::before {
content: "© 2024 Acme Inc. All rights reserved.";
}
.contact-email::before {
content: "support@acme.com";
}然后在所有 HTML 页面中复用该类：
<!-- index.html & about.html & contact.html 中均使用 --> <footer> <p class="footer-text"></p> <p class="contact-email"></p> </footer>
⚠️ 注意事项：
- content 中的文本属于 CSS 内容，不可被搜索引擎索引为正文文本（对 SEO 不友好），也不支持屏幕阅读器自然朗读（需额外 aria-label 或辅助技术适配）；
- 无法包含 HTML 标签（content 仅支持纯文本、字符串、attr() 函数或计数器，不解析 HTML）；
- 若文本需交互（如点击跳转）、动态更新或含结构化语义，必须转向 JavaScript（如 fetch() 加载片段）或服务端方案（如 PHP include、Jekyll 的 {% include %}、或现代构建工具如 Eleventy 的布局系统）。
? 总结：纯前端静态方案中，CSS content 是唯一零 JS 的文本复用手段，本质是“样式层复用”，而非“内容层复用”。追求语义化、可访问性与可维护性时，应优先考虑支持服务端包含或静态站点生成器（SSG）的架构。
立即学习“Java免费学习笔记（深入）”；
