Paragrafo ignora stile a causa di un altro paragrafo nidificato

Question

Probabilmente la mia conoscenza di CSS è limitato, ma non uderstand questo:

<p style="color: green"> 
    <p style="color: red">This is red</p> 
    This should be green. But it's not. 
</p> 

La seconda linea renderà in nero ignorando il "colore: verde". Perché? L'ho provato in Chrome 28 e Firefox 22.

Answer 1

Non è possibile nidificare i paragrafi.

Il paragrafo è un elemento di chiusura automatica, lo </p> è facoltativo - qualsiasi elemento di blocco chiuderà automaticamente l'ultimo aperto <p>.

Questo è quello che sta succedendo:

<p style="color: green"> 
</p> <!-- auto-closed paragraph --> 

<p style="color: red"> 
    This is red 
</p> 

This should be green. But it's not. 

</p> <!-- here you have syntax error --> 

Answer 2

non si può annidare <p> 's. Il tag di chiusura di un paragrafo può essere omesso se seguito da un altro paragrafo. Ciò significa che nel tuo codice, il primo paragrafo non contiene testo, il secondo contiene "Questo è rosso". Poi c'è del testo "Questo dovrebbe essere verde, ma non lo è." che non ha stile e un tag di chiusura </p>, che non ha tag di apertura.

controllo: http://www.w3.org/TR/html-markup/p.html

Answer 3

paragrafo non può essere nidificato all'interno di un altro elemento di paragrafo o blocco.

Quando il codice viene eseguito il rendering nel browser viene reso come come qui di seguito

<p style="color: green"></p> 
    <p style="color: red"> 
     This is red 
    </p> 
    This should be green. But it's not. 
    <p></p> 

Così si può vedere, non v'è alcun wrapper per l'ultima frase di conseguenza viene applicata l'impostazione predefinita css colore cioè nero su quello.