sobreescribir - especificidad css

Relación entre! Importante y CSS especificidad

Question

Al observar la especificación de especificidad de CSS , no se menciona cuántos "puntos" vale la regla !important .

¿Cuándo uno reemplaza a otro? ¿Qué pasa si uno es declarado después del otro? ¿Qué regla se declara más importante? ¿Hay algún tipo de patrón?

Por lo que se ve !important aplica a lo que tiene puntos más específicos para comenzar. Pero, ¿qué pasará si declaro un bazillion id lleno de clases y anidado profundamente? ¿Anulará las reglas establecidas en otra regla menos específica marcada con !important ?

Answer 1

La forma en que pienso sobre esto es esta:

1. !important es una carta de espadas . Sobrepasa todos los puntos de especificidad. Para su pregunta específica, el !important anulará un bazillion id / classes.

2. !important restablece la cascada. Por lo tanto, si usa un !important debajo de otro !important , la segunda instancia gobierna.

Hay una respuesta más técnica por ahí, pero así es como pienso !important .

Una nota más, si está utilizando !important , debe dar un paso atrás y comprobar si está haciendo algo mal. !important implica que estás trabajando contra la cascada de CSS. Deberías usar !important en casos raros.

Answer 2

La especificidad en CSS solo concierne a los selectores , no a sus declaraciones asociadas. !important aplica a una declaración, por lo que solo no juega ningún papel en la especificidad.

Sin embargo !important influye en la cascada , que es el cálculo general de los estilos para un elemento determinado cuando se le aplica más de una declaración de la misma propiedad. O, como Christopher Altman describe sucintamente :

1. !important es una carta de espadas . Sobrepasa todos los puntos de especificidad.

Pero no solo eso: debido a que influye en la cascada en general, si tiene más de un selector !important con una regla que contenga una declaración !important que coincida con el mismo elemento, la especificidad del selector continuará aplicándose. De nuevo, esto se debe simplemente a que se aplica más de una regla al mismo elemento.

En otras palabras, para dos reglas con selectores desiguales en la misma hoja de estilo (por ejemplo, la misma hoja de estilo del usuario, la misma hoja de estilo del autor interno o la misma hoja de estilo del autor externo), se aplican las reglas con el selector más específico. Si hay estilos !important , gana el que está en la regla con el selector más específico. Finalmente, dado que solo puede tener algo que sea importante o no, eso es todo lo que puede hacer para influir en la cascada.

Aquí hay una ilustración de los diversos usos de !important y cómo se aplican:

• La declaración !important siempre prevalece sobre la que no lo tiene (excepto en IE6 y versiones anteriores):

  /* In a <style> element */
  #id {
      color: red !important;
      color: blue;
  }

• Si hay más de una declaración !important en una regla con el mismo nivel de especificidad, la más tarde declarada gana:

  /* In a <style> element */
  #id {
      color: red !important;
      color: blue !important;
  }

• Si declara la misma regla y la misma propiedad en dos lugares diferentes,! !important sigue el orden en cascada si ambas declaraciones son importantes:

  /* In an externally-linked stylesheet */
  #id {
      color: red !important;
  }
  
  /* In a <style> element appearing after the external stylesheet */
  #id {
      color: blue !important; /* This one wins */
  }

• Para el siguiente HTML:

  <span id="id" class="class">Text</span>

  ¡Si tiene dos reglas diferentes y una !important

  #id {
      color: red;
  }
  
  .class {
      color: blue !important;
  }

  Eso !important siempre gana.

  ¡Pero cuando tienes más de uno !important :

  #id {
      color: red !important;
  }
  
  .class {
      color: blue !important;
  }

  La regla #id tiene un selector más específico, por lo que uno gana.