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 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.
selector(a,b,c,d)
comparar: ↑ , ↑ , ↑ , ↑
selector(a,b,c,d)
Como se muestra en el texto original en w3c.org, está dividido en cuatro grupos a, b, cyd, todos los cuales son enteros positivos. El valor predeterminado es 0, que corresponde a diferentes estructuras de selección y formas de composición. 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.
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 Los resultados se han obtenido desde aquí.
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 webjx.com para discutirlo!
A continuación se muestran algunos ejemplos: Problemas de prioridad de CSS La prioridad de 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:
* 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), 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.