ID und Klasse im CSS-Webseitenlayout verstehen

Verständnis und Anwendung von ID und Klasse im XHTML-CSS-Webseitenlayout:

Wenn nur XHTML und CSS objektorientiert sein könnten. . Die Sonne sollte im Norden aufgehen. Allerdings ist alles mit einer OO-Mentalität zu betrachten und wir kommen kaum in die Zahlen. Tatsächlich hat bereits im Jahr 2000 jemand den OO-Stil vorgeschlagen, aber er ist nicht mehr zu finden.

Was also tun? Jetzt weiß jeder, dass CSS so geschrieben werden kann:

Wir können es uns als Prototyp oder Klasse vorstellen, -__-b scheint ursprünglich eine Klasse zu sein, und dann ein Objekt in HTML „instanziieren“, zum Beispiel:

Dieses Element verwendet die entsprechende Definition von CSS, aber die entsprechende Klasse reicht nicht aus, da unsere Seite diese Klasse möglicherweise an vielen Stellen anwendet. Um die „private“ Beziehung zu handhaben, ändern Sie den Code gerade in:

In diesem Fall wendet das Element mit der ID aaoao die Definition der .G_G-Klasse an, und Sie können einen Selektor wie #aoao{} verwenden, um die Definition des privaten Effekts einzugeben, der sich nicht auf die öffentliche .G_G-Klasse auswirkt. Gleichzeitig ist die durch #aoao definierte Priorität höher als .G_G, was mit dem gesunden Menschenverstand übereinstimmt, dass private Definitionen eine höhere Priorität haben als öffentliche Definitionen ^^.

Da ich etwas Einzigartiges wie eine ID verwende, wird die Wiederverwendung solcher privat definierter Dinge zu einem Problem (eine ID kann nur einmal auf einer Seite erscheinen, ich weiß nicht, wer das gesagt hat, aber es ist trotzdem die Wahrheit). Was wäre, wenn wir die Privatisierung vieler derselben Dinge erreichen wollen? Dann müssen wir „Polymorphismus“ implementieren. Grab haha. Ändern Sie den Code erneut:

Eines ist „G_G“ und das andere ist „o_O“, aber wenn wir .o_O{} verwenden, können wir das Element auch so definieren:

Alle Elemente werden definiert, und da Definitionen nicht gestapelt werden, werden sie alle angewendet. Wenn der Code so ist, weiß ich nicht, ob er leichter zu verstehen ist.

Als nächstes müssen wir die „Kapselung“ implementieren. Sie sollten die Kinderauswahl häufig verwenden. Ändern Sie den Code:

Obwohl sowohl .bendan{} als auch .G_G .bendan{} definiert werden können, kann letzteres nur auf Elemente mit der Klasse „G_G“ angewendet werden. Wir können .bendan{} einfach als globale Definition verstehen und .G_G .bendan{ } wird als Teildefinition verstanden, was der Modularisierung unseres XHTML und CSS zugute kommt. ^^Die legendäre „Kapselung“ erschien, und dann ging es weiter.

Ein solcher Code kann unzählige Änderungen hervorrufen, und wenn Sie ihn nicht verstehen, müssen Sie von vorne beginnen. ^^

Verstehen Sie die Anwendung von ID und Klasse im XHTML-CSS-Webseitenlayout genau!