如何将样式应用于 HTML 子文档？ [复制]答案

【问题标题】：How to apply style to HTML subdocuments? [duplicate]如何将样式应用于 HTML 子文档？ [复制]
【发布时间】：2017-07-09 00:51:29
【问题描述】：

我倾向于将自己的自定义 CSS 文档应用于某些网站，因为我更喜欢深色背景和浅色文本，而不是反之亦然的标准，而且很少有网站有“深色模式”或以其他方式迎合这种偏好，这个网站本身就是一个很好的例子。

但是，我最近被一些奇怪的事情所震惊——整个 HTML 文档嵌套在另一个文档中。（我现在明白这是通过使用<iframe> 来实现的，因此几乎不可能在没有 JS 或其他东西的情况下进行样式设置）不过，我只能将自定义样式表应用于父文档。

所以，长话短说，我想知道我必须使用哪种选择器来定位嵌套文档的元素——例如，选择嵌套文档的<body>。我会在!DOCTYPE 中引用html 中的body 这也在 body 中吗？递归嵌套文档呢？

这种嵌套的做法是否是不好的做法并没有立即引起我的关注——它似乎有一个有效的用例，而且无论如何，我都没有建立这个网站。我关心的是如何在外部添加样式。

【问题讨论】：

听起来像，你不能用css给它应用任何样式，除非它来自另一个域。
这在 JS 中是可能的。如果您使用document.getElementById(...) 获取iframe，则可以使用contentDocument 属性访问内部文档。
@Pangloss 是的，就像那样。

【解决方案1】：

假设您确实有一个文档已被“注入”到另一个文档中，您只需使用预期的标识符来定位它：

将元素唯一定位到子文档：

body body [element] {
}

要定位存在于两个文档中的元素，您只需使用标准：

[element] {
}

以上内容会将样式应用于任一文档中包含的任何所需元素。

请注意，您不能使用 CSS 为文档内的 iframe 设置样式 - 您必须找到一种方法来操作 iframe 的 CSS 本身，或者使用 JavaScript 来定位所需的元素document.getElementById()。

希望这会有所帮助！ :)

【讨论】：