Klasse Selektoren und ihre Auswirkungen

Question

Ich bin neu in CSS/HTML und ich bin nicht Englisch, so habe ich einige Probleme, die Beziehungen zwischen Klassen zu verstehen. Ich gehe mit einem Beispiel:

.classA .classB { 
 
    color: red 
 
} 
 

 
.classC { 
 
    color: blue 
 
}

<div class="classA"> 
 
    <p class="classB classC"> 
 
    This text is red 
 
    </p> 
 
</div>

Meine Frage ist: warum es nicht den Stil in .classC definiert Anwendung?

Answer 1

Weil .classA .classB spezifischer ist. Dann .classC.

Wenn Sie schreiben würde:

.classA .classC {color:blue} 

Dann wäre es angewendet werden.

Für weitere Informationen können Sie einen Blick auf MDN CSS Specificity

Answer 2

Dies zu specificity zurückzuführen ist.

In einfachen Worten: Die erste Regel ist spezifischer als die zweite, weil sie eine sehr spezifische Hierarchie beschreibt.

Answer 3

Da Ihre erste CSS-Regel eine höhere Spezifität hat. (Google danach ...)

In diesem speziellen Fall, sagte einfach: „zwei Klassen schlugen eine Klasse“ ...

Answer 4

Es ist, weil die Regel mit verschachtelten Klassen: .classA .classB {color: red} hat mehr Priorität als einfache .classC {color:blue}.