Interprete la prioridad CSS para usted

Antes de hablar sobre la prioridad de CSS, debemos comprender qué es CSS y para qué se utiliza.

Primero, demos una breve explicación de CSS: CSS es la abreviatura de Cascading Style Sheets. Sus especificaciones representan una etapa de desarrollo única en la historia de Internet. Hoy en día, los amigos que se dedican a la producción de páginas web no deberían haber oído hablar de CSS, porque a menudo necesitamos usarlo en el proceso de creación de páginas web.

En segundo lugar: podemos establecer una apariencia rica y fácil de modificar para el documento a través de CSS para reducir la carga de trabajo de los productores de páginas web, reduciendo así el costo de producción y el mantenimiento posterior.

De hecho, es completamente redundante hablar sobre qué es CSS y cuáles son sus funciones. Creo que los amigos que se dedican a la producción de páginas web ya lo han conocido más o menos.

Más cerca de casa, entremos en el tema de hoy:

1. ¿Qué es la prioridad CSS?

La llamada prioridad CSS se refiere al orden en que se analizan los estilos CSS en el navegador.

2. Reglas de prioridad CSS

Dado que los estilos tienen prioridad, habrá una regla para acordar esta prioridad, y esta "regla" es el tema central de este artículo.

La especificidad en una hoja de estilo describe el peso relativo de diferentes reglas. Sus reglas básicas son:

1. Cuente el número de atributos de ID en el selector.
2. Cuente el número de atributos CLASS en el selector.
3. Cuente el número de nombres de etiquetas HTML en el selector.

Finalmente, escriba los tres números en el orden correcto sin agregar espacios ni comas para obtener un número de tres dígitos (css2.1 usa 4 dígitos). (Tenga en cuenta que debe convertir el número a un número mayor que termine en tres dígitos). La lista final de números correspondientes al selector facilita determinar qué características del número mayor anulan las del número menor.

Por ejemplo:

1. Para cada selector de ID (#someid), agregue 0,1,0,0.
2. Agregue 0,0,1,0 a cada selector de clase (.someclass), cada selector de atributo (forma como [attr=value], etc.) y cada pseudoclase (forma: hover, etc.).
3. Para cada elemento o pseudoelemento (:firstchild), etc., agregue 0,0,0,1.
4. Otros selectores incluyen el selector global *, más 0,0,0,0. Equivale a no agregarlo, pero esto también es una especie de especificidad, que se explicará más adelante.

3. Lista de selección para clasificación de características.

Aquí hay una lista de selectores ordenados por atributo:

A juzgar por la tabla anterior, parece difícil de entender. Aquí hay otra tabla:

De lo anterior se puede ver fácilmente que el peso de la etiqueta HTML es 1, el peso de CLASS es 10, el peso de ID es 100 y el peso heredado es 0 (se discutirá más adelante).

Agregue las cadenas de números poco a poco de acuerdo con estas reglas para obtener el peso final y luego compárelos poco a poco de izquierda a derecha al comparar y elegir.

El problema de prioridad es en realidad un problema de resolución de conflictos. Cuando el selector de CSS selecciona el mismo elemento (contenido), se deben elegir diferentes reglas de CSS de acuerdo con la prioridad.

Dicho esto, toca hablar de la herencia de CSS.