Ho appena iniziato a utilizzare NetBeans IDE (6.9.1) e l'ho usato per aggiungere un foglio di stile al mio sito in corso.Qual è l'elemento `root` css/html?
Con mia grande sorpresa, un elemento è stato aggiunto automaticamente:
root {
display: block;
}
Guardandosi intorno, sono riuscito a trovare alcune informazioni sulla :root pseudo-classe, ma niente circa l'elemento root stesso.
Cos'è l'elemento root e ha qualche utilità?
non c'è alcun elemento chiamato radici in HTML. L'elemento html stesso è "l'elemento radice" (che è il termine dato all'elemento che è l'antenato di tutti gli altri elementi nel documento), ma questo corrisponderebbe a html { }.
Tuttavia, vedere the :root pseudo-class (con due punti).
Da qui: http://www.quirksmode.org/css/root.html
L': radice pseudo-elemento seleziona il radice di tutti i blocchi di pagina, ovvero. il blocco di contenimento iniziale. In HTML questo è ovviamente l'elemento
<html>prova foglio di stile:
:root {
background-color: #6374AB;
padding: 50px;
}
Se il: root selettore funziona sinistra ea destra colonna della pagina sono di colore blu, e il bianco colonna centrale è compensata da 50 pixel.
root è un segnaposto per qualsiasi elemento nel modello di foglio di stile di NetBeans IDE. È come una variabile fittizia nel calcolo. Si prega di mettere il cursore su y: nel root { display: block; } eliminare y: e digitare y. L'IDE si apre nella finestra delle istruzioni che fornisce informazioni di valore. Conducono a tale significato per la radice solo una variabile fittizia. Esempi sono em {display: inline; } Inoltre, root è il punto in cui si inizia, l'antenato più profondo dell'albero html con rami e foglie. Quindi all'inizio hai una casella per impostazione predefinita e tutti i rami e le foglie seguono quella predefinita a meno che non cambi la visualizzazione predefinita, quando si verificano, ad altri valori come, ad esempio, in linea.
L'elemento :root è l'elemento che non ha i genitori, quindi credo che l'unico elemento principale in HTML è l'elemento <html> .. Così, quando si utilizza il selettore :root allo stile, sarà lo stile l'intero documento.
(Ho trovato ulteriori informazioni qui: http://webdesign.about.com/cs/css/qt/tipcsschild.htm e qui: http://www.w3schools.com/cssref/sel_root.asp).
C'è una differenza tra root e html, la pseudo-classe di root è un'entità CSS3 e non ha alcun effetto sui browser più vecchi (MSIE 8 o meno, Opera 9.4 o meno)
html /* for all web browsers */
{
color:red;
}
Dovete mettere i due punti prima della parola di radice come segue ...
:root /* for CSS3 web browsers: Chrome, Firefox, MSIE 9+, Safari, Opera 9.5+ */
{
color:blue;
}
Se è stato utilizzato entrambe le linee di CSS, la versione MSIE 8 o meno (o MSIE 9+ quando si esegue in modalità compatibilità, che esegue il rendering come MSIE 7) mostrerebbe il testo in rosso, la maggior parte degli altri browser mostrerebbe il testo blu.
documentazione e le specifiche per 'root' si possono trovare presso il Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/:root
nel caso in cui qualcuno trova questa vecchia domanda e ha bisogno di informazioni, :root è spesso usato negli esempi di dichiarare CSS Proprietà personalizzate o "variabili" che si rendono disponibili in tutto il documento, ad esempio:
:root {
--darkGreen: #051;
--myPink: #fce;
}
section {
color: var(--darkGreen);
background: var(--myPink);
}
article h3 {
color: var(--darkGreen);
}
Tuttavia, qualsiasi elemento può essere utilizzato come selettore per le variabili CSS (non solo :root) pertanto html o body consentirà inoltre a qualsiasi elemento della pagina di accedervi. Se qualcuno ha una buona ragione per usare :root, mi piacerebbe saperlo.
Grazie, Questo è ciò che ho trovato così, ma mi chiedevo circa il 'elemento root' che NetBeans inseriti, non lo pseudo-elemento. – jeroen
Dato che non esiste un tag html simile, e non sembra essere documentato da nessuna parte che possa trovarlo, ho intenzione di indovinare che è inteso come codice di esempio per mostrare come si suppone che i css cerchino i nuovi arrivati. Tutto quello che posso dire è che è definitivamente nel modello, ed è possibile modificare il modello da soli se non ti piace sotto "strumenti - modelli" e poi vai alla cartella "Web". Non lo considererei un "bug" dal momento che è ovviamente intenzionale. Più simile a una "funzione inutile non documentata". – David
Immagino che tu abbia ragione, non è proprio un bug; Ho cambiato il modello, quindi non lo vedrò più. – jeroen