Cómo ignorar el estilo CSS principal

Question 1

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

<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 en las que no quiero resolver este problema:

No puedo editar la hoja de estilo donde está configurado el "#elementId select", mi módulo no tendrá acceso a eso.
Preferiblemente, no anule el estilo de altura utilizando el atributo de estilo.

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

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

Question 2

Debe anularse. Podrías usar:

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

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

Asegúrese de usar la !importantbandera en estilo CSS, por ejemplo, margin-top: 0px !important ¿Qué significa! Important en CSS?

Puede usar un selector de atributos, pero dado que no es compatible con los navegadores heredados (lea IE6, etc.), es mejor agregar un nombre de clase

Question 3

Puede apagarlo anulándolo así:

altura: auto! importante;

Question 4

Esto llegó a la cima debido a una edición ... Las respuestas se han vuelto un poco obsoletas y no son tan útiles hoy como se ha agregado otra solución al estándar.

Ahora hay una propiedad abreviada "todos".

#elementId select.funTimes {
   all: initial;
}

Esto establece todas las propiedades de CSS en su valor inicial ... tenga en cuenta que algunos de los valores iniciales son heredados; Como resultado, todavía se está aplicando un formato en el elemento.

Debido a esa pausa requerida al leer el código o revisarlo en el futuro, no lo use a menos que lo necesite, ya que el proceso de revisión es un punto en el que se pueden cometer errores / errores. al editar la página. Pero claramente, si hay una gran cantidad de propiedades que deben restablecerse, entonces "todas" es el camino a seguir.

El estándar está en línea aquí: https://drafts.csswg.org/css-cascade/#all-shorthand

Question 5

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

Question 6

Deberías usar esto

altura: auto! importante;

Question 7

Tuve una situación similar mientras trabajaba en un sitio web joomla.

Se agregó un nombre de clase al módulo que se verá afectado. En tu caso:

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

luego hizo el siguiente cambio de una sola línea en el CSS. Añadió la línea

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

¡funcionado bien!

Question 8

Si he entendido bien la pregunta: se puede usar autoen el CSScomo esta width: auto;y va a volver a la configuración predeterminada.

Question 9

Tendría sentido que CSS tuviera una forma de simplemente agregar un estilo adicional (en la sección del encabezado de su página, por ejemplo, que anularía la hoja de estilo vinculada) como este:

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

y desactive todos los estilos aplicados anteriormente, pero no hay forma de hacerlo . Tendrá que anular el atributo de altura y establecerlo en un nuevo valor en la sección de cabecera de sus páginas.

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

Question 10

Consulte el texto mecanografiado a continuación para volver a aplicar la clase css nuevamente a un elemento para anular los estilos css del contenedor principal (generalmente un componente del marco) y forzar sus estilos personalizados. El marco de su aplicación (ya sea angular / reaccionar, probablemente lo haga, por lo que el contenedor principal css se volvió a aplicar y ninguno de sus efectos esperados en css-class-name se muestra para su elemento secundario. Llame a this.overrideParentCssRule (childElement, ' css-class-name '); para hacer lo que acaba de hacer el marco (llamar a esto en document.ready o al final del controlador de eventos):

      overrideParentCssRule(elem: HTMLElement, className: string) {
        let cssRules = this.getCSSStyle(className);
        for (let r: number = 0; r < cssRules.length; r++) {
          let rule: CSSStyleRule = cssRules[r];
          Object.keys(rule.style).forEach(s => {
            if (isNaN(Number(s)) && rule.style[s]) {
              elem.style[s] = rule.style[s];
            }
          });
        }
      }

Mike Zheng tradrejoe@gmail.com

Question 11

Hay un montón de valores que se pueden usar para deshacer las reglas CSS: inicial, desarmado y revertir. Más detalles del Grupo de Trabajo de CSS en W3C:

https://drafts.csswg.org/css-cascade/#defaulting-keywords

Como se trata de "borrador", no todos son totalmente compatibles, pero la mayoría de los principales navegadores están sin configurar y con iniciales, por lo que revert tiene menos compatibilidad.