主页 / coding / 问题 / 79421714
Accepted
Alexander
Asked: 2025-02-08 01:36:01 +0800 CST

我怎样才能嵌入预先设置样式的 HTML 并受到周围 CSS 的影响？

  • 772

我正在尝试将一篇预先格式化的科学论文嵌入到我的网站中，而不会受到网站主题的干扰。该文章由从 LaTeX 手稿生成的 HTML 和 CSS 内容组成，我希望完全按原样呈现。我的网站主题最终会对该文章的 HTML 内容的部分进行样式设置，而这正是我试图避免的。例如，主题的样式表具有比 指定的规则更具体的链接格式规则article.scss，因此它们优先。

这只是一个简单的 GitHub Pages 网站，由 Jekyll 静态生成，但这个问题比这更普遍。我使用了一个第三方主题，它几乎可以设置所有内容的样式，并且在大多数页面上运行良好，我只需提供简单的 MarkDown 内容即可对其进行样式设置和呈现。

在这篇文章的页面上，我想使用通用站点标题（所以我需要theme.scss，我不能只是跳过该页面），但其余的页面内容应该只是文章的 HTML，并使用自己的样式article.scss。

将此文章的 HTML 和 CSS 嵌入“干净的”状态的最佳方法是什么？

解决此问题的一种方法是找到所有有问题的主题规则，并添加新的更具体的规则.article p { font-size: unset; }，例如等。这很烦人，但在我第一次尝试时效果不错，但不幸的是，当我更改主题时它完全崩溃了：其中一些“重置规则”变得过时，需要根据新主题的怪癖制定其他新规则。

我想到了An iframe，但这让我有一种“你做错了”的感觉。有没有一种原生的 CSS 方式来表达“此标签及其子标签属于其新的独立上下文，具有自己的一组样式”之类的意思？

html

1 个回答

  1. Best Answer

    我认为最合适的方法是使用 Shadow DOM，可以通过纯 HTML 完成，如下所示：

    p { color: red; }
    <p>Text red</p>

<div>
  <template shadowrootmode="open">
    <style>p {text-decoration: underline}</style>
    <p>Text in shadow DOM and not affected by red</p>
  </template>
</div>

    或者，您也可以使用 JS 在 Shadow DOM 中动态加载内容。

    我希望这能帮到你。

    • 1

相关问题