纯 HTML 和 CSS 无法真正“引用”其他 HTML 文件中的文本内容；唯一可行的方案是将共享文本统一定义在外部 CSS 文件中，再通过 ::before 或 ::after 伪元素注入到各页面的对应元素里。
纯 html 和 css 无法真正“引用”其他 html 文件中的文本内容；唯一可行的方案是将共享文本统一定义在外部 css 文件中，再通过 `::before` 或 `::after` 伪元素注入到各页面的对应元素里。
在静态网站开发中，常有「一处修改、全局同步」的需求——例如页脚版权信息、联系邮箱或公告文案需在所有页面保持一致。遗憾的是，HTML 和 CSS 本身不具备跨文件内容读取能力：你无法像 <div id="//index.html/MyText"> 这样直接引用另一 HTML 文件中的 DOM 节点（该语法无效，也不被浏览器支持）。
✅ 正确做法：将共享文本抽离至外部 CSS 文件（如 shared.css），利用 CSS 的 content 属性配合伪元素动态插入：
/* shared.css */
.shared-footer::before {
content: "© 2024 MyCompany. All rights reserved. Email: contact@mycompany.com";
}然后在每个 HTML 页面中引入该 CSS，并添加对应元素：
<!-- 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 在部分浏览器受限），如需多行，请使用多个伪元素或改用 <iframe>（但会带来语义与 SEO 问题）；
- 此方案不适用于需要 SEO 索引或屏幕阅读器朗读的关键文本——因为伪元素内容默认不被搜索引擎抓取，也不属于 DOM 可访问树（accessibility tree）；
- 若需语义化、可选中、可索引的共享文本，JavaScript（如 fetch() 加载片段）或服务端包含（SSI）、静态站点生成器（如 Jekyll 的 {% include %}）才是可靠选择。
总结：纯前端静态方案下，“CSS content + 外部样式表”是唯一符合要求的 HTML/CSS 解法，本质是“文本集中定义、样式驱动渲染”，而非“HTML 内容复用”。理解其局限性，有助于在项目初期合理选型。
