¿Cuál es la diferencia entre clase e id al marcar elementos HTML?

La página web tiene una estructura HTML muy compleja. Si usamos CSS para definir estilos relacionados, debemos especificar los indicadores correspondientes para estas estructuras y luego escribir los selectores CSS correspondientes para obtener los estilos que dan. Los dos atributos de anotación más utilizados son id y clase, por ejemplo:

<div class = "header" id="header" ></div>Ahora hay más opciones Métodos, como: atributo selectores, etc Sin embargo, esto no se recomienda. Aunque el ID y la clase se pueden omitir mediante el uso del selector de atributos, existen problemas como un mantenimiento posterior inconveniente, una compatibilidad deficiente con los primeros navegadores y una afectación de la eficiencia de representación del navegador. Entonces, aunque hay más opciones, sigo recomendando construir selectores CSS usando identificadores, nombres de clases y nombres de elementos.

Dado que tanto el id como la clase se pueden marcar con estructuras HTML, ¿qué deberías elegir primero? Esto es lo que discutirá este artículo.

La diferencia entre id y clase

Los amigos experimentados pueden saltarse esta parte.

1. Unicidad y repetibilidad

La identificación solo puede ser única en la estructura de la página web. Si especifica un elemento con id aa, el elemento HTML con id aa ya no aparecerá en la página web. Aunque un navegador potente admitirá múltiples ID duplicadas y les aplicará el estilo correspondiente, esto no es estándar y no está permitido.

Por el contrario, las clases se pueden reutilizar en la estructura de la página web. Puede especificar que la clase de un elemento es bb y la clase del siguiente elemento es bb. El estilo bb se puede aplicar a ambos elementos al mismo tiempo. Además, puede establecer múltiples valores de atributos de clase para un elemento, de modo que pueda obtener los estilos de múltiples atributos al mismo tiempo.

Diferentes prioridades en 2.2. Cast Semi-Steel

En el selector de CSS, los estilos con id y clase tienen diferentes prioridades. La prioridad de estilo de id es mayor que la de clase. Si especifico el siguiente estilo para un div con id aa y clase bb:

# aa {Background: red;}

. bb {background: blue;} Luego, el navegador se mostrará con un fondo rojo.

3. Función de salto

El uso del atributo id puede aumentar la función de salto de la etiqueta de anclaje. Si especificamos la identificación como aa para el div en la página, agregamos #aa después de la URL actual y la página saltará inmediatamente a la ubicación del div con la identificación aa. Por ejemplo: salto de capítulo de la Enciclopedia Baidu. La clase no tiene esta funcionalidad.

¿Por qué usar clase en lugar de id?

¿Cuáles son los beneficios de utilizar clases?

1. Reducir los nombres

Es realmente problemático nombrar estructuras complejas. Si los etiquete con identificadores, entonces tengo que darle un nombre a cada estructura. En una página web, hay muchas estructuras con el mismo estilo y efecto (por ejemplo, un estilo de botón unificado), por lo que solo necesitamos escribir un estilo de clase común y luego asignar esta clase a todas las estructuras que requieren el mismo estilo.

2. Altamente reutilizable

Las clases se pueden reutilizar en otras estructuras y se pueden aplicar varias clases a un elemento, por lo que un estilo de clase se puede reutilizar en gran medida. Una aplicación práctica más extrema es la clase atómica, como por ejemplo:

. fl { float:izquierda; mostrar: en línea }

. fr { float: right right; display: inline } Escriba algunas clases lo más breves posible y luego, para un elemento que necesite este estilo (como el flotante anterior), escriba la clase directamente (como class = "fl ") .

En términos generales, para algunas estructuras que requieren el mismo estilo, solo necesita escribir un estilo y luego asignar la misma clase a estas estructuras. Esto puede lograr un alto grado de reutilización del código de estilo y también. fácil de modificar.

3. Prioridad baja

La prioridad de la clase es mayor que el nombre del elemento y menor que la identificación, lo que puede usarse para facilitar la depuración y la anulación de estilo.

Si previamente hemos marcado un elemento con un id y queremos modificar el estilo de este elemento, ¡solo podremos modificar el código de estilo CSS correspondiente o usarlo para un estilo determinado! Es importante enfatizar la sintaxis para enmascarar el estilo original.

Si el elemento está marcado con clase, entonces podemos agregar directamente una identificación al elemento y luego construir un selector CSS para la identificación del elemento para modificarlo y anularlo.

Es precisamente por estas características que deberíamos intentar utilizar clases para anotar elementos para su posterior mantenimiento.

También se requiere 4.id.

La clase no lo es todo. Hay muchos lugares en los que debemos marcar con DNI al mismo tiempo.

5. Salto de etiqueta de anclaje

Si desea utilizar etiquetas de anclaje para saltar en la página, solo puede especificar la identificación de un destino de salto. Debido a que la clase se puede reutilizar. No tiene función de salto.

6. Para entrada

Cuando se utiliza entrada, la etiqueta de etiqueta generalmente se usa para describir la función de esta entrada. Hay dos formas de asociar etiquetas con entradas. Una es utilizar el atributo for de la etiqueta y el valor del atributo es el valor de identificación de la entrada. La otra es envolver la entrada correspondiente con una etiqueta. Obviamente el primero es más flexible y mejor, pero hay que especificar un atributo de identificación para la entrada correspondiente.

Además, algunos requisitos especiales también deben utilizar ID, que no se resumirán aquí.

Combinación de mejor uso

Ha habido muchos comentarios criticando la clase antes, e incluso dijeron que el W3C debería abolir la etiqueta de clase. Stalker M solía ser un ávido usuario del atributo id, pero en la práctica, cada vez más personas han descubierto las ventajas de las clases y han cambiado a ellas.

Una mejor combinación es usar clases para especificar la mayoría de los elementos y estructuras, e identificadores para marcar los pocos elementos que requieren una funcionalidad específica.

Creo que después de leer estos casos, dominas el método. Para obtener contenido más interesante, preste atención a otros artículos relacionados en Gxl.

Lectura relacionada:

¿Cómo hacer que el contenido de una página web móvil sea adaptable?

¿Cómo lidiar con el desbordamiento del contenido de la tabla?

¿Cómo obtener las palabras dinámicas restantes del área de texto?