¿Cómo especificar el orden de las clases de CSS?

Estoy un poco confundido acerca de CSS y el atributo class. Siempre pensé que el orden en el que especifico múltiples clases en el valor del atributo tiene un significado. La última clase podría/debería sobrescribir las definiciones de la anterior, pero esto no parece funcionar. He aquí un ejemplo:¿Cómo especificar el orden de las clases de CSS?

<html> 
<head> 
<style type="text/css"> 
    .extra { 
     color: #00529B; 
     border:1px solid #00529B; /* Blue */ 
     background-color: #BDE5F8; 
    } 

    .basic { 
      border: 1px solid #ABABAB; 
    } 
</style> 
</head> 
<body> 
    <input type="text" value="basic" class="basic"/> 
    <input type="text" value="extra" class="extra"/> 
    <input type="text" value="basic extra" class="basic extra"/> 
    <input type="text" value="extra basic" class="extra basic"/> 
</body> 
</html>

yo esperaría, el tercer ejemplo con class="basic extra" debería tener un borde azul, ya que la especificada en la frontera extra podría sobrescribir la frontera, desde básico.

estoy usando FF 3 en ubuntu 9.04

Fuente

2009-08-24 Tim Büthe

182

El orden en el que se sobreescriben los atributos de una clase no está especificado en la orden las clases se definen en el atributo de clase, pero en su lugar en el que aparecen en el css

.myClass1 {font-size:10pt;color:red} 
.myClass2 {color:green;}

HTML

<div class="myClass2 myClass1">Text goes here</div>

El texto en el div aparecerá en verde y no en rojo porque myClass2 está más abajo en la definición de CSS que mi clase1. Si tuviera que cambiar el orden de los nombres de clase en el atributo de clase, nada cambiaría.

Fuente

2009-08-24 11:01:40 Zoidberg

+12

Guau, realmente me equivoqué. Increíble cuánto tiempo podría hacerlo sin darme cuenta de esto :-) –

Sí, no es obvio e hice lo mismo que tú. Me tomó horas averiguarlo. – Zoidberg

Nunca lo supe :) Gran consejo –

El orden de las clases en el atributo es irrelevante. Todas las clases en el atributo class se aplican por igual al elemento.

La pregunta es: ¿en qué orden aparecen las reglas de estilo en su archivo .css? En su ejemplo, .basic viene después de .extra por lo que las reglas .basic prevalecerán siempre que sea posible.

Si desea proporcionar una tercera posibilidad (por ejemplo, que es .basic pero que todavía debe aplicar las reglas .extra), usted tendrá que inventar otra clase, .basic-extra tal vez, que otorga expresamente para ello.

Fuente

2009-08-24 10:59:07 VoteyDisciple

¿Cómo especificar el orden de las clases de CSS?

Respuesta

Cuestiones relacionadas