Css-Selektor für wenn ein HTML-Dokument in einem Iframe ist? - css, css3

Ich versuche, einen css-Selektor zu machen, der verschiedene Eigenschaften zuweist, die auf dem Wetter basieren, das der HTML innerhalb eines iframe ist oder nicht. Ich versuchte es:

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

Ich erwarte, dass dies zutrifft background: black; zum Körper, wenn es in einem iframe ist, aber es tut nicht, warum? Und gibt es irgendwelche CSS-Optionen? Ich könnte immer mit Javascript überprüfen, wenn html root ist.

IE8-Unterstützung nicht erforderlich.

Antworten:

12 für die Antwort № 1

CSS ist nur im selben Dokument enthalten. Ein Iframe ist ein eigenständiges Dokument und damit eine CSS-Regel, die für die Seite gilt, die enthält Dieser Iframe kann nicht auf die Seite angewendet werden, die "s innerhalb dass iframe.

Dies bedeutet, dass HTML und CSS html ist immer :root (und deshalb kann noch nie Sein :not(:root)).

Sofern Sie dieses CSS nicht von der enthaltenden Seite auf die Seite innerhalb des Iframes übertragen können (z. B. mit einem Skript), glaube ich nicht, dass es einen Weg gibt, CSS zu verwenden.


9 für die Antwort № 2

Es ist wahrscheinlich möglich, das Styling in einem Iframe mit JavaScript zu machen.

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

WICHTIG: Stellen Sie sicher, dass sich der Iframe in der gleichen Domäne befindet, andernfalls können Sie keinen Zugriff auf seine Interna erhalten. Das wäre Cross-Site-Scripting.

Zugriff auf Elemente in iframes mit JavaScript-Dokument weiter hier: Javascript - Erhalte Elemente aus einem iFrame


-2 für die Antwort № 3
html:not(root) body {
background: black !important;
}

Funktioniert


Speisekarte