Recientemente vi un blog con una mejor explicación de la prioridad de CSS. Aunque hay artículos relacionados en Internet, lo volví a publicar para su referencia.
La explicación detallada de la pronunciación de la prioridad CSS incluye cuatro niveles (selector de texto, selector de ID, selector de clase, selector de elementos) y el número de apariciones de cada nivel. La prioridad de CSS se calcula en función del número de apariciones de estos cuatro niveles.
La siguiente es una cita: [Reimpreso del Blog de GOVO]
La lectura prioritaria debe dividirse en "grupos". Los grupos son independientes entre sí y se comparan de izquierda a derecha. Aparecen en grupos, separados por comas.
Código fuente de ejemplo
[www.downcodes.com] selector(a,b,c,d)
comparar: ↑ , ↑ , ↑ , ↑
selector (a, b, c, d), como se muestra en el texto original en w3c.org, se divide en cuatro grupos a, b, c, d, todos son enteros positivos y el valor predeterminado es 0, correspondiente a diferentes selectores. Se forman estructuras y composiciones. Al comparar las prioridades entre selectores, compare uno a uno de izquierda a derecha. Cuando la comparación sea mayor, la comparación se puede detener.
Código fuente de ejemplo
[www.downcodes.com] li.red.level {} /* a=0 b=0 c=2 d=1 -> especificidad = 0, 0, 2, 1 */
/*comparar ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> especificidad = 0, 0, 1, 1 */
/*comparar ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> especificidad = 0, 0, 1, 3 */
/*comparar ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> especificidad = 0, 1, 0, 0 */
/*comparar ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> especificidad = 1 , 0 , 0 , 0 */(En la tabla anterior, ↑ significa que aún se necesita comparación y √ significa que el resultado se ha obtenido a partir de aquí resultado)
Además, siempre que esté escrito correctamente, la estructura del selector solo puede conocerse aproximadamente a partir de la prioridad, como por ejemplo:
1,0,0,0 indica el estilo dentro del elemento;
0,2,1,1 representa un selector que consta de dos selectores de ID, un selector de clase o pseudoclase o atributo y un selector de elemento.
Detalles de las reglas de precedencia de CSS: Después de corregir la pronunciación, podemos empezar a hablar de las reglas detalladas:
El valor del grupo a solo será 1 cuando CSS se escriba en el atributo de estilo; de lo contrario, será 0. La declaración de estilo escrita en estilo no es en realidad un selector, por lo que los valores del grupo b, cyd aquí son todos 0, y solo el real. Solo el selector tendrá valores de grupo b, c, d.
El valor del grupo b está determinado por el selector de ID #ID, cuántos selectores de ID hay y el valor del grupo se acumulará;
El grupo c de valores está determinado por la clase, pseudoclase y selector de atributos, y el grupo de valores se acumulará;
El grupo d de valores está determinado por el nombre del elemento, es decir, el selector de elementos, y el grupo de valores se acumulará;
Tenga en cuenta que estos cuatro conjuntos de valores corresponden a diferentes tipos de selectores y no se afectan entre sí. Se comparan según las reglas de lectura.
¡Importante! El principio de proximidad y la herencia no se analizan aquí y no hay ningún código de ejemplo. ¡Todos pueden venir a W3Cbbs.com para discutirlo!
Aquí hay un ejemplo: problemas de prioridad de CSS
La prioridad CSS incluye cuatro niveles (selector de texto, selector de ID, selector de clase, selector de elementos) y el número de apariciones de cada nivel. La prioridad de CSS se calcula en función del número de apariciones de estos cuatro niveles.
Las reglas de cálculo para la prioridad CSS son las siguientes:
Código fuente de ejemplo
[www.downcodes.com] * El estilo definido en la página, agregar 1,0,0,0
* Para cada selector de ID (como #id), agregue 0,1,0,0
* Agregue 0,0,1,0 a cada selector de clase (como .class), a cada selector de atributos (como [atributo=]) y a cada pseudoclase (como :hover)
* Para cada selector de elemento (como p) o selector de pseudoelemento (como: firstchild), etc., agregue 0,0,0,1
Luego, suma estos cuatro números por separado para obtener el valor de cada prioridad definida por CSS.
Luego compare el tamaño bit a bit de izquierda a derecha. El estilo CSS con el número mayor tendrá mayor prioridad.
ejemplo:
archivo css o <estilo> definido de la siguiente manera:
Código fuente de ejemplo
[www.downcodes.com] 1. h1 {color: rojo;}
/* Un selector de elementos, el resultado es 0,0,0,1 */
2. cuerpo h1 {color: verde;}
/* Dos selectores de elementos, el resultado es 0,0,0,2 */
3. h2.uva {color: morado;}
/* Un selector de elementos y un selector de Clase, el resultado es 0,0,1,1*/
4. li#answer {color: azul marino;}
/* Un selector de elementos, un selector de ID, el resultado es 0,1,0,1 */
El atributo de estilo del elemento se define de la siguiente manera:
Código fuente de ejemplo
[www.downcodes.com] h1 {color: azul;}
/* Definido en la página, un selector de elementos, el resultado es 1,0,0,1*/
Nota: Todos los números se superponen aquí, (0,0,0,1)+(0,0,0,2)+(0,0,1,1)+(0,1,0, 1)+(1 ,0,0,1)=(1,1,1,6)
Desde entonces, el color del elemento h1 es azul.
Aviso:
1. El estilo declarado por! Importante tiene la máxima prioridad. Si hay un conflicto, se calculará nuevamente.
2. Si las prioridades son las mismas, seleccione el estilo que aparece en último lugar.
3. El estilo heredado tiene la prioridad más baja.
