2016-02-13 27 views
5

Diciamo che ho seguito CSS:Come si sovrappongono le proprietà personalizzate CSS?

:root { --color: blue; } 
div { --color: green; } 
#alert { --color: red; } 
* { color: var(--color); } 

e il mio margine di profitto è:

<p>I inherited blue from the root element!</p> 
<div>I got green set directly on me!</div> 
<div id="alert"> 
    While I got red set directly on me! 
    <p>I’m red too, because of inheritance!</p> 
</div> 

La mia domanda è Ha il CSS sopra si traducono in:

body { 
    color: blue; 
} 
div { 
    color: green; 
} 
#alert{ 
    color: red; 
} 

o c'è un ulteriore

* { 
    color: red; 
} 

Senza le variabili, il selettore universale applica lo stesso CSS su tutti gli elementi. Questo cambia e lo stile diventa dipendente dagli elementi?

Un'altra domanda che ho è se :root si traduce in body in CSS.

Ecco una demo CodePen: http://codepen.io/anon/pen/RrvLJQ

risposta

5

Come indicato correttamente nel titolo, proprietà personalizzate cascade. Di fatto, questo è il motivo per cui il modulo si chiama Proprietà personalizzate CSS per variabili a cascata. Ciò significa che la proprietà personalizzata --color viene valutata così com'è per elemento, proprio come qualsiasi altra proprietà CSS.In termini di stili attuali che vengono applicati gli elementi, quello che davvero solo è:

* { 
    color: var(--color); 
} 

Il valore var(--color) viene quindi valutata per ogni elemento in base a come le cascate --color proprietà. Ne consegue che:

  • L'elemento body ha un primo piano blu.
  • Qualsiasi elemento div ha un primo piano verde.
  • L'elemento il cui ID è "avviso" ha un primo piano rosso.
  • Poiché non si dispone di una definizione --color per *, è inherited per impostazione predefinita. Pertanto tutti gli altri elementi ereditano --color dall'elemento padre: body > p eredita da body, diventa blu e #alert > p eredita da #alert, diventando rosso.

Se davvero si vuole esprimere i valori in cascata in termini di CSS, si potrebbe dire che si traduce al seguente:

:root { 
    color: blue; 
} 
div { 
    color: green; 
} 
#alert { 
    color: red; 
} 
* { 
    color: inherit; 
} 

Ma solo perché il CSS originale contiene un esplicito * { color: var(--color); } definizione che garantisce che le mappe color di ogni elemento corrispondano a --color.

Si noti inoltre che il codice che avete viene da an example within the spec, che si è descritto come segue:

Se una proprietà personalizzata viene dichiarata più volte, le regole a cascata standard, aiutano a risolvere esso. Le variabili traggono sempre dal valore calcolato della proprietà personalizzata associata sullo stesso elemento


più Una domanda che ho è se :root traduce body in CSS.

  1. :root non si traduce a qualsiasi elemento in CSS, perché CSS è documento indipendente dal linguaggio.
  2. :root non converte in body in HTML; corrisponde a html.
1

Partiamo da questo:

più Una domanda che ho è se :root traduce body in CSS.

Risposta:

Il selettore :root consente di indirizzare il più alto livello di "genitore" elemento nel DOM, o documento. È definito nella specifica del livello 1 dei selettori CSS come "pseudo-classe strutturale", ovvero è utilizzato per assegnare uno stile al contenuto in base alla sua relazione con il contenuto padre e il contenuto di pari livello . Nella stragrande maggioranza dei casi è probabile che si incontri , :root si riferisce all'elemento <html> in una pagina Web.

Source

Allora questo css vars:

:root { --color: blue; } 
div { --color: green; } 
#alert { --color: red; } 
* { color: var(--color); } 

si tradurrà (a seconda del DOM - come detto sopra), in qualcosa di simile:

html /* this is :root*/ { 
 
    color: blue; 
 
} 
 
div { 
 
    color: green; 
 
} 
 
#alert { 
 
    color: red; 
 
} 
 
* { 
 
    color: inherit; /*this will inherit blue due to HTML is set to blue */ 
 
}
<h1>blue</h1> 
 
<div>green</div> 
 
<span id="alert">red</span> 
 
<span>blue</span>

+1

Si prega di ricordare di collegare alle vostre fonti. – BoltClock

+0

sì @BoltClock Sto ancora modificando la mia risposta su questo. – dippas

+1

Non dovresti aspettare prima di farlo. Le persone possono rispondere * molto * rapidamente alle risposte una volta che vengono pubblicate. Il tuo post potrebbe essere stato contrassegnato per la cancellazione prima che tu abbia avuto la possibilità di modificare la tua risposta. – BoltClock