¿Cómo hago que una clase tenga prioridad sobre una identificación?

Question

<div id="normal" class="wider"> 

</div> 

¡Pero esto no funciona! El ancho del bla bla cancela la clase "más amplia" con.

Answer 1

Lo que tienes allí es un problema de CSS specificity.

.wider tiene una especificidad de 0,0,1,0 mientras que #normal tiene . No se puede superar una ID con otra cosa que no sea una ID (o definiciones en línea, pero ese no es el caso aquí).

Lo que yo recomendaría, si no se puede poner la necesaria declaración width en el selector #normal, es ponerlo en #normal.wider o, en caso de que o bien no es posible, tiene un recipiente identificado, por ejemplo #container, tan alto en el jerarquía como sea posible (¿tal vez una identificación en el cuerpo?) y reemplace .wider por #container .wider. Este nuevo selector tendrá una especificidad de 0,1,1,0 que es un poco mayor que 0,1,0,0.

El uso de !important también funcionará, pero debe utilizarse solo como último recurso.

Ejemplo:

<div id="container" class="wrapper"> 
    <div id="normal" class="wider"> 
</div> 

Para este código HTML algunos selectores posibles con el fin de especificidad sería decreciente:

CSS Selector   -> Specificity 
--------------------------------------- 
#container #normal -> 0,2,0,0 
#container .wider -> 0,1,1,0 // These two have the same specificity so 
#normal.wider  -> 0,1,1,0 // the last declared value will be used 
#normal    -> 0,1,0,0 
.wrapper .wider  -> 0,0,2,0 
.wider    -> 0,0,1,0 

Answer 2

uso # blah.wider en lugar de resolver este

Answer 3

Se puede decorar con atributos !important para aumentar su importancia ....

.wider 
{ 
    width:9000px !important; 
} 

Answer 4

Como personas ya se han mencionado, una identificación tiene una especificidad del 100, mientras una clase tiene solo 10.

Una alternativa a las respuestas sugeridas (que no usa !important,) es eliminar la propiedad de #normal que es conflictivo (el ancho,) y aplicarlo a una segunda clase. Por lo que vería como:

#normal { 
    padding : 0; 
    margin : 0; 
} 

.normal { 
    width : 400px; 
} 

.wider { 
    width : 1000px; 
} 

de alejarse de su margen de beneficio real para ser:

<div id="normal" class="normal"> 
</div> 

donde desea que el 'ancho normal', y:

<div id="normal" class="wider"> 
</div> 

Dónde desea que el elemento extra ancho Es posible que tenga que regresar a través de sus páginas que usan #normal para agregar la clase .normal, pero esto solucionará su problema.

También creo que la respuesta de Gerben también funciona: añade 10 especificidades más a la propiedad de ID (totalmente 110,) que debe anular la propiedad de ancho #normal.

#normal.wider { 
    1000px; 
} 

Answer 5

256 clases CSS es posible sustituir una #id: http://codepen.io/chriscoyier/pen/lzjqh

respuesta de Alin Purcaru explica las reglas básicas de cálculo css precedencia. Pero la explicación de la implementación se puede encontrar en http://hackerne.ws/item?id=4388649