¿Cuáles son las prioridades entre los selectores CSS

Question

CSS Pregunta: Si dos selectores diferentes se aplican a un elemento, ¿quién gana?

Sé que esto no debería suceder, pero quiero ajustar una aplicación heredada, y el CSS está en el medio.

Answer 1

La gory details en la especificación es realmente razonablemente legible. En resumen:

1. !important reglas y normas en línea style ganan más.

2. De lo contrario, normalmente las ganancias más específicas. #id es un selector más específico que .classname es un selector más específico que tagname.

3. Donde las reglas son igualmente específicas, la última declarada gana.

No hay ninguna razón en particular por la que esto 'no debería suceder'. Es normal especificar una regla general y luego agregar una regla más específica para apuntar a un caso; múltiples reglas de propiedad igual en un solo elemento no son inusuales o indeseables.

Answer 2

Consulte la sección specificity order de la especificación (junto con el resto de ese capítulo como reglas importantes y el orden en que aparecen las reglas en la hoja de estilos también tiene un impacto).

Answer 3

¡Debería suceder! Es por eso que se llama hojas de estilo CASCADING. Puede encontrar un ejemplo de las prioridades here

Answer 4

La prioridad entre los selectores se controla por su especificidad. Los selectores más específicos ganan sobre los menos específicos.

Si dos selectores son igualmente específicos, el último gana sobre el primero.

Existen tres niveles de especificidad, id, clase y elemento. Entonces, #elem gana más de .elem ya que una identificación es más específica. .elem .cont gana más de .elem ya que tiene más selectores en el mismo nivel.

Lea más en "¿Qué sucede cuando ocurren conflictos?" en Selectutorial.

Answer 5

El pedido en el archivo CSS solo importa si los selectores comparten la misma especificidad.

Para más información sobre la especificidad del selector: Andy Clarke penned Specificity Wars which is the best overview of how they work.

Answer 6

CSS significa Cascading Style Sheets. Esto significa que las reglas se aplican a los elementos de forma en cascada. Es perfectamente normal que diferentes selectores se apliquen a un elemento. Piensa, por ejemplo, a la siguiente:

<div class="wrapper"> 
    <div id="foo" class="bar" style="some rules">Test</div> 
</div> 

Las siguientes reglas afectarían al elemento "foo":

.wrapper { 
    //some other rules 
} 

#foo { 
    // some more rules 
} 

.bar { 
    // some more rules 
} 

Reglas para las prioridades se puede encontrar here.

Siempre recomiendo usar el plugin Firefox "firebug". Le mostrará exactamente qué propiedades se evalúan para un elemento específico y por qué, enfatizando las anulaciones durante la cascada.

Answer 7

usted tiene que encontrar #no de id = A, # no de la clase B y = #no del tag = c en el selector

ABC con victorias de mayor valor.

.wrapper .title p { 
    //some other rules 
} 

A=0 B=2 C=1 =021 

\#foo { 
    // some more rules 
} 

A=1 = 100 

.bar .head div li{ 
    // some more rules 
} 


A=0 B=2 C=2 =022 

100> 022> 021

por lo #foo gana

Answer 8

1. ! Important estilo en línea
3. #id
4. clase
5. etiqueta

Answer 9

"#id" es más poderoso que el nombre ".class" y ".class" es más poderoso que el nombre de "etiqueta". Pero si aplicamos "! Important" que su prioridad es la mayoría de ellos.

• !
importante
• estilo en línea
• Identificación
• clase
• etiqueta