¿Cómo puedo anular la propiedad css?

109

Básicamente tengo dos CSS externos en mi página.

El primero Main.csscontiene todas las reglas de estilo, pero no tengo acceso a él y, por lo tanto, no puedo modificarlo. Tengo acceso a un segundo archivo Template.css, por lo que necesito anular los Main.cssvalores de template.css.

Esto es fácil por lo que tengo que cambiar el valor, pero ¿cómo elimino una propiedad por completo?

Al igual que decir que una clase .c1tiene height: 40px;, ¿cómo me deshago de esta propiedad de altura?

Bluemagica
fuente

Respuestas:

175

Debe restablecer cada propiedad individual a su valor predeterminado. No es genial, pero es la única forma, dada la información que nos ha proporcionado.

En su ejemplo, haría:

.c1 {
    height: auto;
}

Debe buscar cada propiedad aquí:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Por ejemploheight :

Valor inicial : auto

Otro ejemplomax-height :

Valor inicial : none


En 2017, ahora hay otra forma, la unsetpalabra clave:

.c1 {
    height: unset;
}

Alguna documentación: https://developer.mozilla.org/en-US/docs/Web/CSS/unset

La palabra clave CSS sin establecer es la combinación de las palabras clave inicial y heredada. Al igual que estas otras dos palabras clave de CSS, se puede aplicar a cualquier propiedad de CSS, incluida la abreviatura de CSS all. Esta palabra clave restablece la propiedad a su valor heredado si hereda de su padre o su valor inicial si no. En otras palabras, se comporta como la palabra clave heredar en el primer caso y como la palabra clave inicial en el segundo caso.

La compatibilidad con el navegador es buena: http://caniuse.com/css-unset-value

treinta y dos
fuente
3
+1 por la buena respuesta y referencia. Creo que el enlace ha cambiado a: developer.mozilla.org/en-US/docs/Web/CSS/Reference
Paolo
Establecer el valor en automático no parece funcionar cuando no hay un valor inicial ("valor inicial: ninguno"). Por ejemplo, al hacer "max-width: auto;" Recibo un error de valor de propiedad no coincidente. ¿Qué tengo que hacer?
user1779563
3
@ user1779563 Lo configuró en "ninguno".
AndreKR
1
Me gustaría agradecer a @simhumileco por su respuesta, la cual he robado descaradamente ya que mi respuesta es aceptada y la gente no puede desplazarse hacia abajo.
thirtydot
10
.c1 {
    height: unset;
}

El unsetvalor agregado en CSS3 también resuelve este problema y es un método aún más universal que autooinitial porque establece a cada propiedad CSS su valor predeterminado y, además, su comportamiento predeterminado en relación con su padre.

Tenga en cuenta que el initialvalor rompe el comportamiento mencionado anteriormente.

De MDN :

Al igual que estas otras dos palabras clave de CSS, se puede aplicar a cualquier propiedad de CSS, incluida la abreviatura de CSS all . Esta palabra clave restablece la propiedad a su valor heredado si hereda de su padre o su valor inicial si no.

simhumileco
fuente
9

como digamos que una clase .c1 tiene altura: 40px; ¿Cómo me deshago de esta propiedad de altura?

Lamentablemente, no puedes. CSS no tiene un marcador de posición "predeterminado".

En ese caso, restablecería la propiedad usando

 height: auto;

como @Ben señala correctamente, en algunos casos, inherites el camino correcto a seguir, por ejemplo, al restablecer el color del texto de un aelemento (esa propiedad se hereda del elemento principal):

a { color: inherit }
Pekka
fuente
3
Le daré +1 a eso. También existe el valor "heredar". En algunos contextos distintos de la altura, heredar es más apropiado.
Ben
1
@meo tienes razón. (Pregunta relacionada) que parece significar que hay propiedades que no se pueden restablecer a su valor predeterminado en IE ... qué lástima
Pekka
7

Se initialestá agregando una palabra clave en CSS3 para permitir a los autores especificar explícitamente este valor inicial.

RonyK
fuente
FYI: height:initial;no parece funcionar en IE9.
Kris Hollenbeck
entonces, ¿cuál es la diferencia entre initialy autoy unset?.
ExillustX
2

Para deshacerse de la propiedad de altura fija, puede establecerla en el valor predeterminado:

height: auto;
Richard H
fuente
2

Debe proporcionar un selector con mayor especificidad que el de Main.css. Con ese selector, establezca los valores de las propiedades que desee en sus valores predeterminados, por ejemplo

body .c1 {
    height: auto;
}

No existe un valor "predeterminado" que funcione para todas las propiedades, debe buscar cuál es el valor predeterminado para cada una y usarlo.

Jon
fuente
1

Tuve un problema que incluso cuando sobrescribí "altura" en "desarmado" o "inicial", se comportó de manera diferente a cuando eliminé la configuración anterior.

¡Resultó que también necesitaba eliminar la propiedad de altura mínima!

height: unset;
min-height: none

Editar: Probé en IE 7 y no reconoce "desarmado", por lo que "auto" funciona mejor ".

Nathalia Xavier
fuente