Puntos en la especificidad de CSS

Question

Investigando especificidad me topé con este blog - http://www.htmldog.com/guides/cssadvanced/specificity/

Afirma que la especificidad es un sistema de punto de puntuación 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
cuerpo .wrapper = 11 puntos
cuerpo .wrapper #container = 111 puntos

Así , usando estos puntos seguramente el siguiente CSS y HTML serán r ESULTADO en el texto de ser 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?

EDIT:

Así que al parecer los puntos no sólo se sumaron, que 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 la antigua como la conocemos especificidad del selector de ID se ve así: 0,1,0,0

Answer 1

Pekka's answer es prácticamente correcto, y probablemente la mejor manera de pensar sobre el problema.

Sin embargo, como ya se ha señalado, la recomendación de W3C CSS establece que "Concatenar los tres números a-b-c (en un sistema de números con una base grande) 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" empleado (por lo menos por las 4 navegadores de uso común más ^*) para implementar este algoritmo estándar es de 256 o 2 .

Lo que esto significa es que un estilo especificado con 0 ids y 256 nombres de clase se anulará un estilo especificado con solo 1 id.He probado esto con unos violines:

• 255 classes are not enough to override 1 id
• ...but 256 classes are enough to override 1 id

• ...and 256 tag-names are enough to override 1 class-name

• ...but, alas 256 ids are not enough to override 1 inline style (Actualizado 15.08.2012 - que tendrá que utilizar !important)

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

(2) o 65536, multiplicado por el número de ID en el selector
+ (2) o 256, veces el número de nombres de clase en el selector
+ (2) o 1, veces el número de tag-nombres en el selector

Esto no es muy práctico para la espalda -of-the-envelo p ejercicios para comunicar el concepto.
Esa es probablemente la razón por artículos sobre el tema han estado utilizando de base 10.

***** [utiliza Opera 2 (ver el comentario de karlcow). Algunos otros motores de selectores utilizan infinito - efectivamente hay un 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 (Chrome, Safari) ahora parece utilizar una base superior a 256. Quizás 2 , como Opera? IE y Firefox todavía utilizan 256.

Answer 2

Buena pregunta.

No puedo asegurarlo - todos los artículos que logro encontrar evitan el ejemplo de varias clases, p. here - pero supongo que cuando se trata de comparar la especificación entre un selector de clase y un ID, la clase se calcula solo con un valor de 15, sin importar cuán detallada sea.

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

Sin embargo, hay debe haber algo de apilamiento de las clases porque

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

es más específica que

.o 

la única explicación que tengo es que la especificidad de las clases apilados se calcula sólo contra entre sí, pero no en contra de los ID.

Actualización: Estoy a mitad de camino, obtenlo 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 de 4 cifras:

style id class element 
0,  0, 0, 0 

Según la W3C explanation on specificity, los valores de una especificidad para las normas 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 un muy grande (no definido ?) base

Según tengo entendido, 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 si alguien con una mejor comprensión en matemáticas que yo podía explicar º sistema de numeración y la forma de convertir a decimal cuando los elementos individuales son más grandes que

9.

Answer 3

diría que:

Element < Class < ID 

Creo que solo se acumulan dependiendo de lo que obtienes si es múltiplo de lo mismo. Por lo tanto, una Clase siempre sobrescribirá el elemento y la ID siempre sobre la Clase, pero si es hacia abajo a 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; 
} 

resultara rojo.

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

"si dicen 5things rojo y azul 3 dicen así Ima ir rojo"

Answer 4

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

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

"puntos" de un selector de clase no se pueden sumar a ser más importante que un selector de "id". Simplemente no funciona así.

Answer 5

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

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

específica para calcular la regla es, cada tipo de selector se le asigna un valor numérico . La especificidad de una regla se calcula por sumando el valor de cada uno de sus selectores. Lamentablemente, la especificidad no se calcula en la base 10 sino en un número alto, no especificado, base . Esto es para garantizar 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 constituyentes niveles: a, b, c, y d.

• si el estilo es un estilo en línea, a continuación, a = 1
• b = el número total de selectores de ID
• c = el número de clase, clase de pseudo, y selectores de atributos
• d = el número de selectores de tipo y selectores de pseudo-elemento

se va a decir que a menudo se puede hacer el cálculo en base 10, pero sólo si todas las columnas tienen valores inferiores a 10.

---

En sus ejemplos, los identificadores 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 de número de base alta.

Answer 6

La corriente Selectors Level 4 Working Draft hace un buen trabajo de especificidad en la descripción de CSS:

Especificidades se comparan mediante la comparación de los tres componentes en orden: la especificidad con una mayor Un valor es más específico; si los dos valores A están vinculados, entonces la especificidad con un valor mayor B es más específico; si los dos valores B también están vinculados, entonces la especificidad con un valor mayor c es más específico; 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 da su selector de una puntuación especificidad del 150, que le da un B valor de 15. Un único valor Un es suficiente para dominar a esto.

Como metáfora, imagine una familia de 1 abuelo, 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 va a decir:

Debido a las 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 Faust's answer, donde las implementaciones de CSS en 2012 permitieron que los valores de especificidad se desbordaran entre sí.

En 2012, la mayoría de los navegadores implementaban una limitación de 255, pero se permitió que esta limitación se desborde. 255 clases tenían un A, B, c puntuación especificidad de 0,255,0, pero 256 clases desbordado y tenía una A, B, c puntuación 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, ambas clases 255 y 256 tendrían la misma puntuación A, B, c de 0,255,0.

El problema que figura en la respuesta de Faust ha sido desde corregido en la mayoría de navegadores modernos.

Answer 7

Me gusta comparar el ranking de la especificidad con la tabla de medallas de los Juegos Olímpicos (primer método de oro, basado primero en el número de medallas de oro, luego en plateado 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 bastante buena calculadora de especificidad 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 Juegos Olímpicos Río 2016 medallero parece