¿Cómo puedo eliminar el estilo del elemento CSS en línea (sin JavaScript)?

Question

Tengo un estilo asignado para un elemento HTML específico en mi archivo de hoja de estilo, como este

label { 
    width: 200px; 
    color: red; 
} 

En un caso especial, me gustaría utilizar un elemento de etiqueta en el documento HTML, pero ignorar el estilo especificado para el elemento de etiqueta (solo para una instancia en el documento). ¿Hay alguna forma de lograr esto de forma genérica sin anular los atributos de estilo del elemento con estilos en línea?

<label for="status">Open</label> 

Para reiterar, para el código HTML que muestra la etiqueta el estilo elemento (anchura 200 px, color rojo) se aplica. Me gustaría utilizar los atributos de estilo predeterminados (sin saber qué son) y sin tener que saber qué se especifica específicamente en la configuración del estilo del elemento.

Answer 1

Desde el Mozilla developer center:

Debido CSS no proporciona una palabra clave "default", la única manera de restaurar el valor predeterminado de una propiedad es explícitamente volver a declarar esa propiedad.

Por lo tanto, se debe tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, selectores por nombre de etiqueta, como p) que puede anular con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no se puede restaurar automáticamente.

Debido a la naturaleza en cascada de CSS, es una buena práctica definir las reglas de estilo de la manera más específica posible para evitar elementos de estilo que no se diseñaron.

Answer 2

<label ... style = "width: auto; color: inherit" /> 

Answer 3

no creo que puede restablecerla a lo que era antes de la definición de etiqueta en la hoja de estilo, pero podría darle la etiqueta de un ID y anularlo en su hoja de estilo.

<label for="status" id="status-label">Open</label> 

label { 
    width: 200px; 
    color: red; 
} 

label#status-label { 
    width: auto; 
    color: blue; 
} 

Answer 4

<label ... class="default">...</label> 


label { 
    width: 200px; 
    color: red; 
} 

label.default { 
    width: auto; 
    color: inherit; 
} 

sin embargo, que puede no proporcionar los resultados deseados - la otra forma sería la de dar a todos los demás etiquetas de una clase particluar (s) y luego no asignar esa clase para la etiqueta "por defecto".

Answer 5

Puede utilizar el :not selector:

label:not([for="status"]) { 
    width: 200px; 
    color: red; 
} 

Soporte parece que se remontan a alrededor de 2009 (FF3.5)

Answer 6

La situación ha cambiado algo en 6 años: ahora es posible eliminar un CSS conjunto propiedad sin usar JavaScript mediante las palabras clave initial, unset o revert. Estos son compatibles con todos los navegadores modernos.