Verstehen Sie das Such- und Matching-Prinzip von CSS, um CSS prägnanter und effizienter zu gestalten_Erfahrungsaustausch

Schauen Sie sich ein einfaches CSS an:

DIV#divBox p span.red{color:red;} Nach unserem Verständnis sucht der Browser zunächst nach dem DIV-Element mit der ID von divBox . Wenn gefunden, suchen Sie nach allen p-Elementen darunter und dann nach allen span-Elementen. Wenn festgestellt wird, dass die span-Klasse rot ist, wenden Sie den Stil an. So ein einfaches und leicht verständliches Prinzip, aber dieses Verständnis ist völlig entgegengesetzt und falsch.


Matching-Prinzip:

Der Browser-CSS-Matching sucht nicht von links nach rechts, sondern von rechts nach links. Beispielsweise lautet die Suchsequenz des Browsers für das zuvor erwähnte DIV#divBox p span.red{color:red;} wie folgt:

Suchen Sie zuerst nach allen span-Elementen mit class='red' im HTML. und suchen Sie dann erneut. Überprüfen Sie, ob das übergeordnete Element ein p-Element enthält, und stellen Sie dann fest, ob im übergeordneten Element von p ein div-Element mit der ID divBox vorhanden ist.

Der Vorteil der Browsersuche von rechts nach links besteht darin, einige irrelevante Stilregeln und Elemente so früh wie möglich herauszufiltern. Zum Beispiel das folgende HTML und CSS:

Code kopieren Der Code lautet wie folgt:

DIV#divBox p span.red{color:red;}