CSS选择器，用于何时HTML文档位于iframe中? [英] Css–selector for when a html-document is inside an iframe?

问题描述

我正在尝试创建一个CSS选择器，根据HTML是否位于iframe内的天气分配不同的属性.我试过了:

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:

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

如果它在iframe内，我希望它可以将background: black;应用于主体，但事实并非如此，为什么?并且有任何CSS选项吗?我总是可以用javascript检查html是否是root.

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.

不需要IE8支持.

推荐答案

CSS仅作用于同一文档. iframe本身就是整个文档，因此适用于iframe包含的页面的CSS规则不能应用于iframe内的页面.

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.

这意味着就HTML和CSS而言，html始终为 :root(因此从不为:not(:root)).

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

除非您能够将此CSS从包含页面转移到iframe中的页面(例如使用脚本)，否则我不相信有一种仅使用CSS的方法.

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选择器，用于何时HTML文档位于iframe中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！