¿Es posible dar una prioridad de clase CSS sobre otra?

Question

Digamos que tengo un div que usa dos clases de CSS que usan text-align, pero una está centrada y la otra está alineada a la derecha.

¿Es posible especificar algo que otorgue prioridad a una clase sobre la otra?

Answer 1

1. especificar un selector más específico, por ejemplo prefijo de una identificación antes de que o prefijo del nombre de nodo antes de la clase
2. asignar después de la otra clase
3. si dos clases están en archivos separados, importe el segundo archivo prioridad
4. ! important

!important es la manera perezosa, pero que realmente debe ir para # 1 para evitar importantes-cepción. Una vez que haya agregado un !important, no puede usarlo para hacer alguna otra regla, incluso más importante.

Answer 2

Debe utilizar la especificidad de CSS para anular las declaraciones anteriores http://htmldog.com/guides/cssadvanced/specificity/

p = 1 point 
.column = 10 points 
#wrap = 100 points 

Así: p.column { text-align: right; } se pueden sobrescribir por: body p.column { text-align: left; }

Answer 3

Si quieres ser explícita al respecto, puede especificar cómo la combinación de esas dos clases trabaja en conjunto, proporcionando una regla para los elementos que contienen ambas clases. Por ejemplo, puede dar explícitamente algo con las dos clases foo y bar del mismo estilo que el bar de la siguiente manera. Esto funciona porque .foo.bar es más específico que solo .foo para los elementos que tienen ambas clases, y por lo tanto esta regla tendrá prioridad sobre la regla .foo.

.foo { text-align: center } 
.bar, .foo.bar { text-align: right } 

Si no quiere estar presente explícita, usted podría colocar la regla para bar después de la regla para foo, como selectores dados de la misma especificidad, más tarde normas prevalecen sobre las anteriores:

.foo { text-align: center } 
.bar { text-align: right } 

Puede obtener más información sobre cómo se determina la precedencia entre las reglas en el capítulo de especificaciones de CSS sobre cascade; esa es la "C" de CSS, y es importante entenderlo bien para aprovechar al máximo CSS.