Ich habe gerade angefangen, NetBeans IDE (6.9.1) zu benutzen und habe es benutzt, um ein Stylesheet zu meiner laufenden Site hinzuzufügen.Was ist das css/html `root` Element?
Zu meiner Überraschung wurde ein Element automatisch hinzugefügt:
root {
display: block;
}
umsah, ich einige Informationen über die :root pseudo-Klasse, aber nichts über das selbst root Element finden.
Was ist das root Element und hat es irgendeine Verwendung?
Es gibt kein Element namens root in HTML. Das html-Element selbst ist "das Wurzelelement" (was für das Element steht, das der Vorgänger aller anderen Elemente im Dokument ist), aber dies würde durch html { } ausgeglichen werden.
Siehe jedoch the :root pseudo-class (mit einem Doppelpunkt).
Von hier aus: http://www.quirksmode.org/css/root.html
Das: root Pseudoelement wählt die Wurzel aller Blöcke in der Seite, dh. der anfängliche Block. In HTML dies ist offensichtlich das
<html>Element-Test Sheet:
:root {
background-color: #6374AB;
padding: 50px;
}
Wenn das: root Wähler des linken und rechten Spalte der Seite funktioniert sind blau, und die weiß mittlere Spalte ist um 50 Pixel versetzt.
root ist ein Platzhalter für jedes Element in der Stylesheet-Vorlage von NetBeans IDE. Es ist wie eine Dummy-Variable in der Infinitesimalrechnung. Bitte setzen Sie den Cursor auf y: Löschen Sie in der root { display: block; } y: und geben Sie y ein. IDE erscheint im Anweisungsfenster, das nützliche Informationen liefert. Sie führen eine solche Bedeutung für die Wurzel als nur eine Dummy-Variable. Beispiele sind em {display: inline; } Darüber hinaus ist Wurzel der Punkt, wo Sie beginnen, der tiefste Vorfahre des HTML-Baumes mit Zweigen und Blättern. Zu Beginn haben Sie also standardmäßig eine Box, und alle Zweige und Blätter folgen dieser Vorgabe, es sei denn, Sie ändern ihre Standardanzeige, wenn sie auftritt, auf andere Werte, wie zum Beispiel Inline.
Das :root Element ist das Element, das keine Eltern hat, so dass ich denke, dass das einzige Root-Element in HTML ist das <html> Element .. Also, wenn Sie die :root Wähler auf Stil verwenden, wird es das gesamte Dokument stylen.
(Ich fand mehr Informationen hier: http://webdesign.about.com/cs/css/qt/tipcsschild.htm und hier: http://www.w3schools.com/cssref/sel_root.asp).
Es gibt einen Unterschied zwischen root und html, die Root-Pseudo-Klasse ist eine CSS3-Entität und hat keinen Einfluss auf ältere Browser (MSIE 8 oder weniger, Opera 9.4 oder weniger)
html /* for all web browsers */
{
color:red;
}
Sie haben einen Doppelpunkt vor dem Wort Wurzel setzen sich wie folgt ...
:root /* for CSS3 web browsers: Chrome, Firefox, MSIE 9+, Safari, Opera 9.5+ */
{
color:blue;
}
Wenn Sie diese beiden CSS-Linien, MSIE Version 8 oder weniger (oder MSIE verwendet Wenn 9+ im Kompatibilitätsmodus ausgeführt wird und MSIE 7) als roten Text angezeigt wird, zeigen die meisten anderen Browser blauen Text an. https://developer.mozilla.org/en-US/docs/Web/CSS/:root
Dokumentation und Spezifikationen für ‚root‘ kann im Mozilla Developer Network finden root diese alte Frage und die Information muss findet jeder CSS Variablen
falls erklären können verwendet werden, :root wird häufig in den Beispielen verwendet CSS Benutzerdefinierte Eigenschaften oder „Variablen“ zu deklarieren, die im gesamten Dokument zur Verfügung stehen, zum Beispiel:
:root {
--darkGreen: #051;
--myPink: #fce;
}
section {
color: var(--darkGreen);
background: var(--myPink);
}
article h3 {
color: var(--darkGreen);
}
Jedoch kann ein beliebiges Element als Selektor für CSS-Variablen verwendet werden (nicht nur :root), so dass html oder body auch jedes Element auf der Seite für den Zugriff auf sie aktivieren können. Wenn jemand einen guten Grund hat, :root zu benutzen, würde ich es gerne wissen.
Danke, das ist, was ich auch gefunden, aber ich habe mich gefragt, über das 'root' Element, das NetBeans eingefügt, nicht das Pseudoelement. – jeroen
Da es kein solches html-Tag gibt, und es scheint nirgendwo dokumentiert zu sein, dass ich es finden kann, werde ich raten, dass es als Beispielcode gemeint ist, um Ihnen zu zeigen, wie css nach Neulingen suchen soll. Alles, was ich Ihnen sagen kann, ist, dass es definitiv in der Vorlage ist, und Sie können die Vorlage selbst bearbeiten, wenn Sie es nicht mögen unter "Werkzeuge - Vorlagen" und gehen Sie dann zum "Web" -Ordner. Ich würde es nicht als "Bug" betrachten, da es offensichtlich beabsichtigt ist. Mehr wie ein "undokumentiertes nutzloses Feature". – David
Ich denke, du hast Recht, es ist nicht wirklich ein Fehler; Ich habe die Vorlage geändert, damit ich sie nicht mehr sehen werde. – jeroen