Ziffer ignoriert Stil wegen eines anderen verschachtelten Absatzes

Question

Wahrscheinlich Wissen meiner CSS ist begrenzt, aber ich dies nicht uderstand:

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

Die zweite Zeile übertragen wird in schwarz, die zu ignorieren „Farbe: grün“. Warum? Ich habe es in Chrome 28 und Firefox 22 getestet.

Answer 1

Sie können Absätze nicht verschachteln.

Absatz ist ein automatisch schließendes Element, das </p> ist optional - jedes Blockelement schließt automatisch das letzte offene <p>.

Dies ist, was passiert:

<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

können nicht verschachtelt <p> ‚s. Das End-Tag eines Absatzes kann weggelassen werden, wenn ihm ein anderer Absatz folgt. Dies bedeutet, dass der erste Absatz in Ihrem Code keinen Text enthält, der zweite enthält "Dies ist rot". Dann gibt es einen Text "Das sollte grün sein. Aber es ist nicht." Das hat keinen Stil und ein schließendes </p> Tag, das kein öffnendes Tag hat.

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

Answer 3

Absatz kann nicht in einem anderen Absatz oder Blockelement verschachtelt werden.

Wenn Ihr Code im Browser gerendert wird es als wie gemacht wird, unter

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

So können Sie sehen, gibt es die Standard-CSS-Farbe also schwarz angewandt als Ergebnis keinen Wrapper auf den letzten Satz ist wird auf diesem.