Eltern beeinflussen Kindart gemeinsam Wähler mit CSS

Question

Ich habe folgendes Markup:

<div id="content"> 
    <div id="contact"> 
    <p>Testing p selector in child</p> 
    </div> 
</div> 

Und diese beiden CSS-Dateien:

default.css [Eltern]

#content p { 
color: #000000; 
font-size: 14px; 
font-family: helvetica; 
text-align: left; 

}

form.css [Kind]

#contact p { 
background-color: #F2F7FB; 
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;  
color: #3670A7; 
text-align: left;  
margin-right: 0px;  
padding-right: 0px; 

}

Warum das:

<p>Testing p selector in child</p> 

ist der Stil der Eltern bekommen und nicht der des Kindes?

Answer 1

Kredit geht an BoltClock'saUnicorn,

von Kommentaren: Ist Ihr default.css nach form.css geladen?

Answer 2

Es ist wahrscheinlich die Ladereihenfolge Ihrer externen .css-Dateien, aber Sie können sicherstellen, dass Ihre Stil-Kaskaden, wie Sie möchten, unabhängig von dieser Reihenfolge angewendet werden, indem Sie den "direkten Kind" Selektor in Ihren Kaskaden verwenden.

Die Verwendung von #contact > p und #content > p zeigt an, dass ein direktes Kind des Containers mit der ID ist und diesen Stil verwendet.