Comprensión de ID y clase en el diseño de páginas web CSS

Comprensión y aplicación de ID y clase en el diseño de páginas web XHTML CSS:

Si tan solo XHTML y CSS pudieran estar orientados a objetos. . El sol debería salir por el norte. Sin embargo, todo debe verse con una mentalidad OO y apenas podemos hacer números. De hecho, alguien propuso el estilo OO ya en 2000, pero ya no se puede encontrar.

Entonces, ¿qué hacer? Ahora todo el mundo sabe que CSS se puede escribir así:

Podemos pensar en ello como un prototipo o una clase, -__-b parece ser una clase originalmente y luego "crear una instancia" de un objeto en HTML, por ejemplo:

Este elemento utilizará la definición correspondiente de CSS, pero la clase correspondiente no es suficiente, porque nuestra página puede aplicar esta clase en muchos lugares. Para manejar la relación "privada", cambie el código ahora a:

En este caso, el elemento con ID aaoao aplicará la definición de la clase .G_G, y puedes usar un selector como #aoao{} para ingresar la definición del efecto privado, que no afectará a la clase pública .G_G. Al mismo tiempo, la prioridad definida por #aoao será mayor que .G_G, lo que es consistente con el sentido común de que las definiciones privadas tienen mayor prioridad que las definiciones públicas ^^.

Dado que uso algo único como una identificación, reutilizar cosas definidas de forma privada se convierte en un problema (una identificación solo puede aparecer una vez en una página, no sé quién dijo eso, pero de todos modos es la verdad). ¿Qué pasa si queremos lograr la privatización de muchas de las mismas cosas? Entonces debemos implementar el "polimorfismo". Cava jaja. Cambie el código nuevamente:

Uno es "G_G" y el otro es "o_O", pero si usamos .o_O{}, también podemos definir el elemento si el CSS es así:

Todos los elementos se definirán y, como las definiciones no se acumulan, se aplicarán todos. Si el código es así no sé si será más fácil de entender.

A continuación, debemos implementar la "encapsulación". Debes usar el selector de niños con frecuencia. Cambia el código:

Aunque tanto .bendan{} como .G_G .bendan{} se pueden definir, este último solo se puede aplicar a elementos con clase "G_G". Podemos entender simplemente .bendan{} como una definición global y .G_G .bendan{ }. Se entiende como una definición parcial, lo cual es beneficioso para la modularización de nuestro XHTML y CSS. ^^Apareció la legendaria "encapsulación" y luego continuó.

Dicho código puede producir innumerables cambios y, si no lo comprende, debe comenzar desde cero. ^^

¡Comprenda profundamente la aplicación de ID y clase en el diseño de páginas web XHTML CSS!