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 [email protected]

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.

Answer 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?

Answer 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

Answer 3

Sigo siendo fastidiado diciendo que debes evitar el !importantdonde puedas

Jacob Schneider

Answer 4

55

Puede apagarlo anulándolo así:

altura: auto! importante;

Fabián Brenes
fuente

4

No recomendaría usarlo !importanten el marcado de producción; en realidad, solo debe usarse al depurar.

Amistoso

@Amicable ¿puedes explicar por qué esto no es recomendable?

felipe_gdr

1

@pipo_dev hay muchos artículos en línea que podrían explicarlo mejor que yo en un comentario y con ejemplos. En pocas palabras, es un truco. El 99% del tiempo se usa en lei de una solución adecuada que daría como resultado un CSS mejor y más fácil de mantener. Algunos usos aceptables de !importantincluyen clases de utilidad y hacks de compatibilidad con versiones anteriores para navegadores antiguos como IE7

Amistoso

trabajo deosnt. pagnation es el último td de la tabla. .detailTable td {ancho: 50%; } .pagnation {ancho: 100%! importante; }

Philip Rego

2

No estoy de acuerdo con @Amicable. Realmente no hay alternativa a usar !importantcuando está atascado con un tema principal sobre el que no tiene control pero aún desea anular.

Justin Skiles

Answer 5

4

No recomendaría usarlo !importanten el marcado de producción; en realidad, solo debe usarse al depurar.

Amistoso

Answer 6

@Amicable ¿puedes explicar por qué esto no es recomendable?

felipe_gdr

Answer 7

1

@pipo_dev hay muchos artículos en línea que podrían explicarlo mejor que yo en un comentario y con ejemplos. En pocas palabras, es un truco. El 99% del tiempo se usa en lei de una solución adecuada que daría como resultado un CSS mejor y más fácil de mantener. Algunos usos aceptables de !importantincluyen clases de utilidad y hacks de compatibilidad con versiones anteriores para navegadores antiguos como IE7

Amistoso

Answer 8

trabajo deosnt. pagnation es el último td de la tabla. .detailTable td {ancho: 50%; } .pagnation {ancho: 100%! importante; }

Philip Rego

Answer 9

2

No estoy de acuerdo con @Amicable. Realmente no hay alternativa a usar !importantcuando está atascado con un tema principal sobre el que no tiene control pero aún desea anular.

Justin Skiles

Answer 10

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

Answer 11

Estoy construyendo un sitio web modal para bloquear, esta fue una solución para que mis etiquetas HTML no fueran sobrescritas por los estilos de los sitios web.

Lucas Andrade

Answer 12

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.

Answer 13

3

Deberías usar esto

altura: auto! importante;

Ahmar Mahmood
fuente

Answer 14

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!

Answer 15

1

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

elad plata
fuente

Answer 16

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>

Answer 17

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 [email protected]

Answer 18

¿Puede explicar por qué se debería usar mecanografiado para un requisito tan simple?

Nico Haase

Answer 19

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.

Cómo ignorar el estilo CSS principal

Respuestas: