¿Cuáles son las prioridades entre los selectores CSS?

Question

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

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

Answer 1

Los detalles sangrientos en la especificación son en realidad razonablemente legibles. En resumen:

Las

1. reglas ! importantes y las reglas style en línea son las que más ganan.

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

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

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

Answer 2

debe encontrar #no de id = A, # no de class = B y #no de tag = c en el selector

ABC con mayor valor gana.

.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

entonces #foo gana

Answer 3

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

Answer 4

Consulte la sección orden de especificidad 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 estilo también tienen un impacto).

Answer 5

" # id " es más poderoso que " .class " nombre y "clase". es más poderoso que " tag " nombre. Pero si aplicamos ''! Importante '' que su prioridad es la mayoría de ellos.

• ! importante
• estilo en línea
• id
• clase
• etiqueta

Answer 6

La prioridad entre los selectores se controla según cuán específicos sean. Los selectores más específicos ganan a los menos específicos.

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

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

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

Answer 7

El orden 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 escribió especificidad Wars, que es el mejor resumen de cómo funcionan.

Answer 8

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

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

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

.wrapper {
  //some other rules
}

#foo {
  // some more rules
}

.bar {
  // some more rules
}

Las reglas para las prioridades se pueden encontrar aquí .

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

Answer 9

1. ! importante
2. estilo en línea
3. #id
4. clase
5. etiquetas