eliminar/restablecer css heredado de un elemento

Sé que esta pregunta se hizo antes, pero antes de marcarla como un duplicado, quiero decirle que mi situación es un poco diferente de la que encontré en Internet.eliminar/restablecer css heredado de un elemento

Estoy construyendo y script incorporado que las personas pueden poner en sus sitios. Este script crea un div con cierto ancho/alto y cierta información en él.

Mi problema es que algunos sitios web declaran estilos para div heredados por mi div también.

por ejemplo:

div{ 
    background-color:red; 
}

así que si yo no puse cualquier color de fondo a mi div, se mostrará de color rojo, incluso si yo no quiero eso.

Las únicas soluciones que vengo son sobrescribir tantas propiedades css, de esta forma mi div se mostrará exactamente como yo quiera. El problema con esta solución es que hay demasiadas propiedades CSS para sobrescribir y quiero que mi script sea lo más liviano posible.

Así que mi pregunta es si conoce otra solución a mi problema. Puede estar en css/javascript/jQuery.

Gracias

Fuente

2011-09-13 Doua Beri

¿Qué le parece dar a su div una clase, y luego proporcionar una hoja de estilo correspondiente que los usuarios de su div pueden incluir o concatenar al final de su hoja de estilo existente. De esta forma, puede proporcionar todos los formatos predeterminados que desee, pero con la ventaja adicional para sus usuarios de que pueden modificar los valores predeterminados si lo desea. Sé que no es más ligero que usted poniendo en línea los estilos que desea, pero es más flexible y, por lo tanto, de mayor beneficio para sus usuarios. He visto complementos de jQuery que funcionan de esa manera. – nnnnnn

"reajustar" estilos de un elemento específico no es posible, usted tiene que sobrescribir todos los estilos que no quieres/necesidad. si haces esto directamente con css o usando jquery para aplicar los estilos, depende de lo que sea más fácil para ti (pero no recomendaré usar javascript/jquery para esto, ya que es completamente innecesario).

Si su div es algún tipo de "widget" que se puede incluir en otros sitios, puede intentar envolverlo en un iframe. esto "restablecerá" los estilos, porque su contenido es otro documento, pero tal vez esto afecte a cómo funciona tu widget (o tal vez lo rompa por completo), por lo que es posible que esto no sea posible en tu caso.

Fuente

2011-09-13 07:33:29 oezi

Estaba pensando en iframe, pero como dijo, me llevará a otros problemas mucho más importantes que este. –

Sin embargo, creo que organizar tus estilos siempre es una mejor solución, pero a veces entiendo que debes aplicar una solución rápida. Así que, desde mi horrible punto de vista, creo que esta pregunta es mejor para su caso: http://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only – lKashef

-1

Un enfoque simple sería usar el modificador !important en css, pero esto puede ser anulado de la misma manera por los usuarios.

Tal vez se pueda lograr una solución con jquery atravesando todo el DOM para encontrar sus clases (re) definidas y eliminar/forzar estilos CSS.

Fuente

2011-09-13 07:34:09

Siempre que sean atributos como clases e ids, puede eliminarlos mediante los modificadores de clase javascript/jQuery.

document.getElementById("MyElement").className = "";

No hay forma de eliminar una etiqueta específica CSS que no sea anularla (o usar otro elemento).

Fuente

2011-09-13 07:37:30 AlexBay

Pruebe esto: cree un div llano sin ningún estilo o contenido fuera del rojo div. Ahora puede usar un ciclo en todos los estilos del div plano y asignarlo a su div interior para restablecer todos los estilos. Por supuesto, esto no funciona si alguien asigna estilos a todos div s (es decir, sin utilizar una clase. CSS sería div { ... }).

La solución habitual para problemas como este es dar a su div una clase distinta.De esta forma, los diseñadores web de los sitios pueden ajustar el estilo de su div para que se ajuste al resto del diseño.

Fuente

2011-09-13 07:38:16

Establezca las propiedades CSS relevantes/importantes.

Ejemplo (sólo cambiar los atributos que pueden causar su div mirar completamente diferente):

background: #FFF; 
border: none; 
color: #000; 
display: block; 
font: initial; 
height: auto; 
letter-spacing: normal; 
line-height: normal; 
margin: 0; 
padding: 0; 
text-transform: none; 
visibility: visible; 
width: auto; 
word-spacing: normal; 
z-index: auto;

elegir un selector muy específico, como div#donttouchme, <div id="donttouchme"></div>. Además, puede agregar `! Important antes de cada punto y coma en la declaración. Sus clientes deliberadamente intentan estropear su diseño cuando esta opción falla.

Fuente

2011-09-13 08:20:14

Usted podría intentar sobrescribir el CSS y el uso de automóviles

No creo que esto va a funcionar con el color en concreto, pero me encontré con un problema por el que tenía una propiedad de los padres como

.parent { 
    left: 0px; 
}

y luego pude definir a mi hijo con algo como

.child { 
    left: auto; 
}

y efectivamente "restablecer" la propiedad.

Fuente

2013-11-20 20:24:42 Seth

Más específicamente, establezca una propiedad para su el valor predeterminado ('auto' no está disponible en todo, como los colores). No está desarmando el valor heredado, solo devolviéndolo explícitamente a su valor predeterminado. – STW

puede utilizar esta opción a continuación.

<style> 
    div:not(.no_common_style){ 
     background-color:red; 
    } 
</style>

ahora, si su cualquier lugar en el que no desea aplicar el estilo por defecto se puede utilizar la clase 'no_common_style' como clase. ejemplo:

<div class="no_common_style"> 
    It will not display in red 
</div>

Fuente

2014-06-28 10:51:41 bharatpatel

Por lo que entiendo que desee utilizar un div que hereda de ninguna clase, sino la tuya. Como se mencionó en la respuesta anterior, no se puede restablecer completamente una herencia div. Sin embargo, lo que funcionó para mí con ese problema fue utilizar otro elemento, uno que no es frecuente y ciertamente no se utiliza en la página html actual. Un buen ejemplo es utilizar en lugar de personalizarlo para que se vea como lo haría su ideal.

Fuente

2015-11-08 19:51:10

eliminar/restablecer css heredado de un elemento

Respuesta

Cuestiones relacionadas