¿Cuál es la diferencia entre la clase de selector CSS y la identificación? id y uso de clase en HTML

¿Cuál es la diferencia entre la clase de selector CSS y la identificación? id y uso de clase en HTML

Chen Weiliang ha estado trabajando recientemente en SEO , optimizando el tema de WordPress del sitio web.

Aunque he aprendido algunos conocimientos básicos de HTML y CSS antes, pero no lo he operado por un tiempo, especialmente el uso de la parte CSS, es fácil de olvidar.

Por lo tanto, registre y resuma la diferencia y el uso de la identificación y la clase del selector de CSS aquí:

• id corresponde a #div
• la clase corresponde a .div

La diferencia entre id y clase.

descripción de identificación

• id es una etiqueta fija, que se usa para definir el estilo más grande en la página web, que se define en forma de #div
• Por ejemplo: dividir columnas, arriba, cuerpo, abajo, etc...
• Se utiliza para definir un elemento específico, que solo puede aparecer una vez por página y no se puede llamar repetidamente.

descripción de la clase

• Class es un grupo de estilos, que se utiliza para definir los estilos detallados en la página web.Se define en forma de .div y se puede repetir.
• Por ejemplo: un menú específico, una línea de texto, etc...
• En la misma página, puede ser llamado repetidamente por múltiples elementos

El selector div en sí mismo no tiene propiedades, al definir su css, controla algunos diseños como el ancho, alto, color de fondo y tamaño del texto del div.

Los sitios web de comercio electrónico típicos y las páginas web HTML generadas por programas de creación de sitios web utilizan CSS para lograr el diseño de la página.

¿Qué es un seleccionador?

La definición de cada estilo CSS consta de 2 partes:

选择器 {样式}

• La parte antes de {} es el "selector".
• El "selector" indica el "estilo" de {} al que actúa.
• Es decir, ¿sobre qué elemento de la página web funciona este "estilo"?

ejemplo de código

Aquí se explica cómo seleccionar y diseñar un elemento class="sidebar":

.sidebar
{ 
background-color:black;
}

Aquí se explica cómo seleccionar y diseñar un elemento con id="footer":

#footer
{ 
background-color:black;
}