Cómo ignorar el estilo css de los padres

Me pregunto cómo ignorar un estilo padre y usar el estilo predeterminado (ninguno). Mostraré mi caso específico como ejemplo, pero estoy bastante seguro de que esta es una pregunta general.Cómo ignorar el estilo css de los padres

<style> 
#elementId select { 
    height:1em; 
} 
</style> 

<div id="elementId"> 
    <select name="funTimes" style="" size="5"> 
     <option value="test1">fish</option> 
     <option value="test2">eat</option> 
     <option value="test3">cows</option> 
    </select> 
</div>

maneras no quiero para resolver este problema:

No puedo editar la hoja de estilo en el que el "#elementId seleccione" está ajustado, mi módulo no tendrá acceso a eso.
Preferiblemente, no anule el estilo de altura con el atributo de estilo.

Por ejemplo, usando firebug puedo desactivar el estilo principal y todo está bien, este es el efecto que estoy buscando.

Una vez que se establece un estilo, ¿se puede deshabilitar o se debe anular?

Fuente

2009-06-03 SeanDowney

Debe ser anulado. Se podría utilizar:

<!-- Add a class name to override --> 
<select name="funTimes" class="funTimes" size="5"> 

#elementId select.funTimes { 
    /* Override styles here */ 
}

Se podría utilizar un selector de atributos, pero ya que no es compatible con los navegadores heredados (leer IE6, etc), es mejor agregar un nombre de clase

Fuente

2009-06-03 19:26:31 PatrikAkerstrand

puede crear otra definición baje en su hoja de estilo CSS que básicamente invierte la regla inicial. también podría agregar "! important" a dicha regla para asegurarse de que se mantenga.

Fuente

2009-06-03 19:33:20 Jason

Tendría sentido para CSS para tener una manera de añadir simplemente un estilo adicional (en la sección de cabecera de la página, por ejemplo, lo que anularía la hoja de estilos vinculada) como este:

<head> 
<style> 
#elementId select { 
    /* turn all styles off (no way to do this) */ 
} 
</style> 
</head>

y apague todos los estilos aplicados previamente, pero no hay forma de hacerlo. Deberá anular el atributo de altura y establecerlo en un nuevo valor en la sección principal de sus páginas.

<head> 
<style> 
#elementId select { 
    height:1.5em; 
} 
</style> 
</head>

Fuente

2009-06-04 20:34:52

Se podía apagarlo anulando de esta manera:

altura:! Automático importante;

Fuente

2010-05-03 21:19:48

Simple, supervisado por mí pero muy efectivo. Gracias +1. – Ben

No recomendaría el uso de '! Important' en el marcado de producción; en realidad, solo debería usarse cuando se depura. – Amicable

@Amicable ¿Puedes explicar por qué esto no es aconsejable? –

Tuve una situación similar al trabajar en un sitio web de joomla.

Agregó un nombre de clase al módulo que se verá afectado. En su caso:

<select name="funTimes" class="classname">

luego hizo el siguiente cambio de línea simple en el CSS. Se agregó la línea

#elementId div.classname {style to be applied !important;}

funcionó bien!

Fuente

2012-02-24 20:11:34 Rajatgsr

Si he entendido correctamente el qeustion: puede utilizar "Auto" en el CSS como esto width:auto y luego volverá a la configuración predeterminada

Fuente

2013-01-20 13:27:09

Debe utilizar este

height: auto!importante;

Fuente

2015-05-27 07:57:53

Cómo ignorar el estilo css de los padres

Respuesta

Cuestiones relacionadas