Descripción de la prioridad / especificidad del selector CSS

Question

Descripción de la prioridad / especificidad del selector CSS

Me gustaría entender cómo funcionan los selectores CSS con las colisiones de propiedades, ¿cómo se selecciona una propiedad en lugar de otra?

 div {
      background-color:red;
 }
 div.my_class {
      background-color:black;
 }
 div#my_id {
      background-color:blue;
 }
 body div {
      background-color:green;
 }
 body > div {
      background-color:orange;
 }
 body > div#my_id {
      background-color:white;
 }

 <html>
      <body>
           <div id="my_id" class="my_class">hello</div>
      </body>
 </html>

Para alguien esto podría ser obvio, pero no para mí!

¿Existe alguna guía o enlace donde finalmente pueda entender cómo funciona la prioridad del selector?

29

css css-selectors html

Author: TylerH, 2010-11-01

Source

4 answers

Lo que le interesa es especificidad.

Firebug es una gran herramienta para ayudar a inspeccionar esto. Pero otros navegadores también han incorporado herramientas para inspeccionar las reglas CSS aplicadas.

5

Author: Jason McCreary,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-01 19:40:09

Puede consultar la respuesta completa aquí Documentación de Mozilla

Comience desde el más específico: selectores de identificación > selectores de clase > selectores de tipo (h1 normal, etiqueta p, etc..) !importante siempre gana, pero se considera una mala práctica.Ver el enlace de arriba.

La mejor manera es experimentar con él:

  <!-- start class vs id -->
  <p class="class1" id="id1">.class vs #id: The winner is #id</p>

  <!-- upper vs bottom -->
  <p id="id2">the very bottom is the winner</p>

  <!--most specific is the winner -->
  <p id="id3">the most specific</p>

  <!--pseudo and target selector -->
  <h3>pseudo vs type selector</h3>

  <!-- !important is more important! -->
  <h1 id="very-specific">HI! I am very important!</h1>
  </body>

CSS:

#id1{
    color: blue;
}

.class1{
    color: red;
}

#id2{
    color: yellow;
}

#id2{
    color : green;
}

body p#id3{
    color :orange;
}

body p{
    color : purple;
}

body{
    color : black;
}

h3::first-letter {
    color: #ff0000;

}

h3{
    color: CornflowerBlue ; 
}

h1{
    color: gray !important;
}

body h1#very-specific{
    color: red;
}

Aquí está un caso de prueba.

2

Author: Vincentius Ronalto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-19 10:07:50

Elemento

Selectores de clase

Selectores ID

Estilos en línea

!importante

En orden, 1 es la especificidad más baja y 5 es la más alta. https://youtu.be/NqDb9GfMXuo se mostrarán los detalles para demostrarlo.

2

Author: li bing zhao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-31 20:14:34

score 45 · Accepted Answer

Simplemente agregaré un enlace a la especificación CSS 2.1 en sí, y cómo se supone que los navegadores calculan la especificidad:

Sección CSS 2.1 6.4.3:

La especificidad de un selector se calcula de la siguiente manera:

contar 1 si la declaración es from es un atributo 'style' en lugar de una regla con un selector, 0 de lo contrario (= a) (En HTML, los valores del atributo "style" de un elemento son reglas de hoja de estilo. Estas reglas no tienen selectores, así que a = 1, b=0, c = 0, y d = 0.)

cuente el número de atributos ID en el selector (=b)

cuente el número de otros atributos y pseudo-clases en el selector (= c)

cuente el número de nombres de elementos y pseudo-elementos en el selector (= d)

La especificidad se basa solo en la forma del selector. En particular, un selector de la forma "[id=p33] " se cuenta como un selector de atributos (a=0, b=0, c=1, d=0), incluso si el atributo id se define como un "ID" en el DTD del documento fuente.

Concatenar los cuatro números a-b-c-d (en un sistema numérico con una base grande) da la especificidad.

Si las especificidades son iguales, entonces CSS 2.1 Sección 6.4.1 entra en juego:

Finalmente, ordenar por orden especificado: si dos declaraciones tienen el mismo peso, origen y especificidad, la última especificada gana. Las declaraciones en hojas de estilo importadas se consideran anteriores a cualquier declaración en la propia hoja de estilo.

Tenga en cuenta que esto se refiere a cuándo se define el estilo, no a cuándo se utiliza. Si las clases .a y .b tienen la misma especificidad, gana la que se defina la última en la(s) hoja (s) de estilos. <p class="a b">...</p> y <p class="b a">...</p> tendrán el mismo estilo, basado en el orden de definición de .a y .b.