当html文档在iframe中时的Css选择器？

Question

我正在尝试制作一个css选择器,根据天气html是否在iframe中分配不同的属性.我试过这个:

html:not(:root) body {
    background: black !important;
}

我希望这适用background: black;于身体,如果它在iframe内部,但它没有,为什么？有没有css选项？如果html是root,我总是可以用javascript检查.

IE8支持不需要支持.

Answer 1

CSS仅限于同一文档中.iframe是在自己的权利整个文档,所以CSS规则适用于该页面包含该iframe不能应用到的页面内该iframe.

这意味着,只要HTML和CSS来说,html是永远 :root的(因此可以永远是:not(:root)).

除非你能够将这个CSS从包含页面转移到iframe中的页面(例如使用脚本),否则我不相信只使用CSS的方法.

Answer 2

可能可以使用JavaScript在iframe中进行样式设置.

document.querySelector('iframe').contentDocument.body.querySelector('#some-element').style.background-color = 'red';

重要信息:确保iframe位于同一个域中,否则您将无法访问其内部.这将是跨站点脚本.

在这里使用JavaScript文档访问iframe中的元素:Javascript - 从iFrame中获取元素