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

I'm trying to make a css-selector that assigns diffrent properites based on weather the html is inside an iframe or not. I tried this:

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

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

I expect this to apply background: black; to the body if it's inside an iframe, but it doesn't, why? And are there any css options? I could always check with javascript if html is root.

我希望这适用于背景:黑色;如果它在iframe内部,但它没有,为什么?有没有css选项?如果html是root,我总是可以用javascript检查。

IE8 support not requierd.

IE8支持不需要支持。

3 个解决方案

#1

CSS is only scoped within the same document. An iframe is an entire document in its own right, and so a CSS rule that applies to the page that contains that iframe cannot apply to the page that's within that iframe.

CSS仅限于同一文档中。 iframe本身就是一个完整的文档,因此适用于包含该iframe的页面的CSS规则无法应用于该iframe中的页面。

This means that as far as HTML and CSS are concerned, html is always :root (and therefore can never be :not(:root)).

这意味着就HTML和CSS而言,html始终是:root(因此永远不能是:not(:root))。

Unless you are able to transfer this CSS from the containing page to the page within the iframe (using a script for example), I don't believe there is a way using just CSS.

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

#2

It is probably possible to do the styling in an iframe with JavaScript.

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

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

IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.

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

Accessing elements inside iframes with JavaScript document futher here: Javascript - Get element from within an iFrame

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

#3

-1

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

Works

#1