specificity sobreescribir sobre selectors priority example estilos especificidad como css css-selectors css-specificity

sobreescribir - important css



Puntos en la especificidad de CSS (7)

Actualmente estoy usando el libro CSS Mastery: Advanced Web Standards Solutions .

El Capítulo 1, página 16 dice:

Para calcular qué tan específica es una regla, a cada tipo de selector se le asigna un valor numérico. La especificidad de una regla se calcula sumando el valor de cada uno de sus selectores. Desafortunadamente, la especificidad no se calcula en la base 10 sino en un número base alto, no especificado. Esto es para asegurar que un selector altamente específico, como un selector de ID, nunca sea anulado por muchos selectores menos específicos, como selectores de tipo.

(énfasis mío) y

La especificidad de un selector se divide en cuatro niveles constituyentes: a, b, c y d.

  • si el estilo es un estilo en línea, entonces a = 1
  • b = la cantidad total de selectores de id.
  • c = el número de selectores de clases, pseudoclases y atributos
  • d = la cantidad de selectores de tipo y selectores de pseudo-elemento

Continúa diciendo que a menudo puede hacer el cálculo en base-10, pero solo si todas las columnas tienen valores menores que 10.

En sus ejemplos, los ID no valen 100 puntos; cada uno vale [0, 1, 0, 0] puntos. Por lo tanto, un id supera 15 clases porque [0, 1, 0, 0] es mayor que [0, 0, 15, 0] en un sistema numérico de base alta.

Investigar la especificidad Me topé con este blog - http://www.htmldog.com/guides/cssadvanced/specificity/

Establece que la especificidad es un sistema de puntaje para CSS. Nos dice que los elementos valen 1 punto, las clases valen 10 puntos y los ID valen 100 puntos. También dice que estos puntos se suman y la cantidad total es la especificidad de ese selector.

Por ejemplo:

cuerpo = 1 punto
body .wrapper = 11 puntos
body .wrapper #container = 111 puntos

Entonces, usando estos puntos, seguramente el siguiente CSS y HTML harán que el texto sea azul:

CSS:

#a { color: red; } .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o { color: blue; }

HTML:

<div class="a"> <div class="b"> <div class="c"> <div class="d"> <div class="e"> <div class="f"> <div class="g"> <div class="h"> <div class="i"> <div class="j"> <div class="k"> <div class="l"> <div class="m"> <div class="n"> <div class="o" id="a"> This should be blue. </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

RESULTADO:

http://jsfiddle.net/hkqCF/

¿Por qué el texto es rojo cuando 15 clases equivalen a 150 puntos en comparación con 1 ID que equivale a 100 puntos?

EDITAR:

Entonces, aparentemente, los puntos no se suman, están concatenados. Lea más al respecto aquí - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html PERO, ¿eso significa que las clases en nuestro selector = 0,0,15,0 O 0,1,5,0 ?

Mis instintos me dicen que es lo primero, ya que SABEMOS que la especificidad del selector de ID es la siguiente: 0,1,0,0

Buena pregunta.

No puedo asegurarlo, todos los artículos que logro encontrar evitan el ejemplo de múltiples clases, por ejemplo, here , pero supongo que cuando se trata de comparar la especificidad entre un selector de clase y una ID , la clase se calcula con un valor de 15 solamente, sin importar cuán detallado sea.

Eso coincide con mi experiencia en cómo se comporta la especificidad.

Sin embargo, debe haber cierto apilamiento de clases porque

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

es más específico que

.o

la única explicación que tengo es que la especificidad de las clases apiladas se calcula solo una contra la otra, pero no contra las ID.

Actualización : A mitad de camino lo entiendo ahora. No es un sistema de puntos, y la información sobre las clases que pesan 15 puntos es incorrecta. Es un sistema de numeración de 4 partes muy bien explicado here .

El punto de partida es 4 figuras:

style id class element 0, 0, 0, 0

De acuerdo con la explicación del W3C sobre la especificidad , los valores de especificidad para las reglas antes mencionadas son:

#a 0,1,0,0 = 100 classes 0,0,15,0 = ... see the comments

este es un sistema de numeración con una base muy grande (¿indefinida?).

Según entiendo, debido a que la base es muy grande, ningún número en la columna 4 puede superar un número> 0 en la columna 3, lo mismo para la columna 2, columna 1 ... ¿Es correcto?

Me interesaría saber si alguien con una mejor comprensión matemática que yo podría explicar el sistema de numeración y cómo convertirlo a decimal cuando los elementos individuales son mayores que 9.

El actual borrador de trabajo de Level 4 de Selectors hace un buen trabajo al describir la especificidad en CSS:

Las especificidades se comparan al comparar los tres componentes en orden: la especificidad con un valor A más grande es más específico; si los dos valores A están vinculados, entonces la especificidad con un valor B más grande es más específico; si los dos valores B también están vinculados, entonces la especificidad con un mayor valor c es más específica; si todos los valores están vinculados, las dos especificidades son iguales.

Esto significa que los valores A, B y C son completamente independientes entre sí.

15 clases no le dan a su selector un puntaje de especificidad de 150, le da un valor B de 15. Un solo valor A es suficiente para dominar esto.

Como metáfora, imagine una familia de 1 gran padre, 1 padre y 1 hijo. Esto podría representarse como 1,1,1 . Si el padre tiene 15 hijos, eso no los convierte repentinamente en otro padre ( 1,2,0 ). Significa que el padre tiene muchísima más responsabilidad de la que tuvo con solo 1 hijo ( 1,1,15 ). ;)

La misma documentación también dice:

Debido a limitaciones de almacenamiento, las implementaciones pueden tener limitaciones en el tamaño de A , B o c . De ser así, los valores superiores al límite deben fijarse a ese límite y no desbordarse.

Esto se ha agregado para abordar el problema presentado en la respuesta de Fausto , por el cual las implementaciones de CSS en 2012 permitieron que los valores de especificidad se desbordaran entre sí.

En 2012, la mayoría de los navegadores implementaron una limitación de 255, pero se permitió que esta limitación se desborde. 255 clases tenían una puntuación de especificidad A, B, c de 0,255,0 , pero 256 clases se desbordaron y tenían una puntuación A, B, c de 1,0,0 . De repente, nuestro valor B se convirtió en nuestro valor A. La documentación de Nivel 4 de Selectors irradia por completo ese problema al establecer que nunca se puede permitir el desbordamiento del límite. Con esta implementación, tanto 255 como 256 clases tendrían el mismo puntaje A, B, c de 0,255,0 .

El problema dado en la respuesta de Fausto ha sido reparado en la mayoría de los navegadores modernos.

Me gusta comparar el ranking de Especificidad con la medalla de los Juegos Olímpicos (primer método de oro, basado primero en el número de medallas de oro, luego en plata y luego en bronce).

Funciona también con su pregunta (gran cantidad de selectores en un grupo de especificidad). La especificidad consideró cada grupo por separado. En el mundo real, rara vez he visto casos con más de una docena de selectores).

También hay una calculadora de especificidades bastante buena disponible here . Puedes poner tu ejemplo (#a y .a .b .c .d .e .f .g .h .i .j .k .l .m .n.o) allí y ver los resultados.

Ejemplo de la tabla de medallas de los Juegos Olímpicos Rio 2016 se ve como

No creo que la explicación del blog sea correcta. La especificación está aquí:

http://www.w3.org/TR/CSS2/cascade.html#specificity

Los "puntos" de un selector de clase no pueden sumarse para ser más importantes que un selector "id". Simplemente no funciona así.

Yo diría que:

Element < Class < ID

Creo que solo se acumulan dependiendo de lo que obtienes si es múltiple de lo mismo. Por lo tanto, una Clase siempre sobrescribirá el elemento y la ID siempre sobre la Clase, pero si depende de cuál de los 4 elementos, donde 3 es azul y 1 es rojo, será azul.

Por ejemplo:

.a .b .c .d .e .f .g .h .i .j .k .l { color: red; } .m .n .o { color blue; }

Debería salir rojo.

Ver Ejemplo http://jsfiddle.net/RWFWq/

"si los 5º dicen rojo y 3 dicen azul, bueno, Imagínate rojo"

La respuesta de Pekka es prácticamente correcta, y probablemente la mejor manera de pensar sobre el tema.

Sin embargo, como muchos ya lo han señalado, la recomendación CSS del W3C establece que "Concatenar los tres números abc (en un sistema numérico con una gran base) da la especificidad". Así que el friki en mí solo tuvo que descubrir qué tan grande es esta base.

Resulta que la "base muy grande" empleada (al menos por los 4 navegadores más usados * ) para implementar este algoritmo estándar es 256 o 2 8 .

Lo que esto significa es que un estilo especificado con 0 ids y 256 nombres de clase anulará un estilo especificado con solo 1 id. Probé esto con algunos violines:

Entonces, efectivamente, hay un "sistema de puntos", pero no es una base 10. Es la base 256. Así es como funciona:

(2 8 ) 2 o 65536, multiplicado por el número de identificadores en el selector
+ (2 8 ) 1 o 256, multiplicado por el número de nombres de clase en el selector
+ (2 8 ) 0 o 1, multiplicado por el número de nombres de etiqueta en el selector

Esto no es muy práctico para los ejercicios de retroceso envolvente para comunicar el concepto.
Esa es probablemente la razón por la cual los artículos sobre el tema han estado utilizando la base 10.

***** [Opera usa 2 16 (ver el comentario de karlcow). Algunos otros motores de selección usan infinito , de hecho no hay sistema de puntos (ver el comentario de Simon Sapin).]

Actualización, julio de 2014:
Como Blazemonger señaló a principios de año, los navegadores webkit (cromo, safari) ahora parecen usar una base superior a 256. ¿Quizás 2 16 , como Opera? IE y Firefox todavía usan 256.