Comprendre l'ID et la classe dans la mise en page Web CSS

Compréhension et application de l'ID et de la classe dans la mise en page des pages Web XHTML CSS :

Si seulement XHTML et CSS pouvaient être orientés objet. . Le soleil devrait se lever au nord. Cependant, tout doit être considéré avec une mentalité OO, et nous pouvons à peine composer avec les chiffres. En fait, quelqu'un a proposé le style OO dès 2000, mais on ne le trouve plus.

Alors que faire ? Maintenant, tout le monde sait que CSS peut être écrit comme ceci :

On peut le considérer comme un prototype, ou une classe, -__-b semble être une classe à l'origine, puis "instancier" un objet en HTML, par exemple :

Cet élément utilisera la définition correspondante de CSS, mais la classe correspondante ne suffit pas, car notre page peut appliquer cette classe à de nombreux endroits. Afin de gérer la relation "privée", changez le code tout de suite en :

Dans ce cas, l'élément avec l'ID aaoao appliquera la définition de la classe .G_G, et vous pouvez utiliser un sélecteur comme #aoao{} pour saisir la définition de l'effet privé, ce qui n'affectera pas la classe publique .G_G. , en même temps, la priorité définie par #aoao sera supérieure à .G_G, ce qui est cohérent avec le bon sens selon lequel les définitions privées ont une priorité plus élevée que les définitions publiques ^^.

Puisque j’utilise quelque chose d’unique comme un identifiant, la réutilisation de telles choses définies de manière privée devient un problème (un identifiant ne peut apparaître qu’une seule fois sur une page, je ne sais pas qui a dit ça, mais c’est la vérité de toute façon). Et si nous voulions parvenir à la privatisation d’un grand nombre de choses identiques ? Ensuite il faut mettre en œuvre le « polymorphisme ». Creuse haha. Changez à nouveau le code :

L'un est "G_G" et l'autre est "o_O", mais si nous utilisons .o_O{}, nous pouvons également définir l'élément si le CSS est comme ceci :

Les éléments seront tous définis, et comme les définitions ne s'empilent pas, elles seront toutes appliquées. Si le code est comme ça, je ne sais pas s'il sera plus facile à comprendre.

Ensuite, nous devons implémenter « l’encapsulation ». Vous devez utiliser fréquemment le sélecteur d'enfant. Modifiez le code :

Bien que .bendan{} et .G_G .bendan{} puissent être définis, ce dernier ne peut être appliqué qu'aux éléments de classe "G_G". Nous pouvons simplement comprendre .bendan{} comme une définition globale et .G_G .bendan{ }. est compris comme une définition partielle, ce qui est bénéfique à la modularisation de nos XHTML et CSS. ^^La légendaire "encapsulation" est apparue, puis elle a continué.

Un tel code peut produire d'innombrables changements, et si vous ne le comprenez pas, vous devez repartir de zéro. ^^

Comprenez en profondeur l'application de l'ID et de la classe dans la mise en page des pages Web XHTML CSS !