如何将样式应用于 HTML 子文档? [复制]
Posted
技术标签:
【中文标题】如何将样式应用于 HTML 子文档? [复制]【英文标题】:How to apply style to HTML subdocuments? [duplicate] 【发布时间】:2017-07-09 00:51:29 【问题描述】:我倾向于将自己的自定义 CSS 文档应用于某些网站,因为我更喜欢深色背景和浅色文本,而不是反之亦然的标准,而且很少有网站有“深色模式”或以其他方式迎合这种偏好,这个网站本身就是一个很好的例子。
但是,我最近被一些奇怪的事情所震惊——整个 html 文档嵌套在另一个文档中。 (我现在明白这是通过使用<iframe>
来实现的,因此几乎不可能在没有 JS 或其他东西的情况下进行样式设置)不过,我只能将自定义样式表应用于父文档。
所以,长话短说,我想知道我必须使用哪种选择器来定位嵌套文档的元素——例如,选择嵌套文档的<body>
。我会在!DOCTYPE
中引用html
中的body
这也在 body
中吗?递归嵌套文档呢?
这种嵌套的做法是否是不好的做法并没有立即引起我的关注——它似乎有一个有效的用例,而且无论如何,我都没有建立这个网站。我关心的是如何在外部添加样式。
【问题讨论】:
听起来像 这在 JS 中是可能的。如果您使用document.getElementById(...)
获取iframe,则可以使用contentDocument
属性访问内部文档。
@Pangloss 是的,就像那样。
【参考方案1】:
假设您确实有一个文档已被“注入”到另一个文档中,您只需使用预期的标识符来定位它:
将元素唯一定位到子文档:
body body [element]
要定位存在于两个文档中的元素,您只需使用标准:
[element]
以上内容会将样式应用于任一文档中包含的任何所需元素。
请注意,您不能使用 CSS 为文档内的 iframe 设置样式 - 您必须找到一种方法来操作 iframe 的 CSS 本身,或者使用 javascript 来定位所需的元素document.getElementById()
。
希望这会有所帮助! :)
【讨论】:
CSS 从不应用于<iframe>
中的元素。
啊,我明白了。我想<iframe>
位是一个重要的包含。抱歉,我显然不习惯处理……这些。以上是关于如何将样式应用于 HTML 子文档? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 $(element).css(styles) 将多个样式应用于 div? [复制]