Anular estilos en línea añadidos mediante JS con CSS

Un plugin js agrega un estilo que me está dando dolor de cabeza:

element.style { z-index: 100 !important; } 

Así que he intentado esto:

 html body div#shell div#shellContent div#bottomPart div#rightCol div.containerBox div#embedContainer div#janrainEngageEmbed div.janrainContent div#janrainView div.janrainHeader[style] { z-index: 1 !important; } 

y todavía nada.

Contrariamente a las otras respuestas, es posible anular estilos en línea con CSS:

http://css-tricks.com/override-inline-styles-with-css/

Supongo que el selector extremadamente largo podría no estar golpeando el elemento.

Tuve un problema de z-index similar con el plugin de Janrain que se solucionó con esto:

 #janrainEngageEmbed > div[style] { z-index: 0; } 

En tu caso, probablemente necesites:

  z-index: 0 !important; 

El estilo en línea prevalecerá sobre cualquier selector. Restablezca el estilo usted mismo en javascript o aplique un parche al plugin … para ser sincero, no parece especialmente bien escrito. 🙂

el estilo en línea siempre anula el css externo e interno, más el hecho de que el complemento está usando la cláusula !important (¡muy mala práctica!), todos juntos hacen que sea imposible arreglarlo solo con css. Creo que deberás usar algunos js personalizados para anular la configuración del complemento.

tal vez la mejor manera sea verificar si puede especificar una función de callback con el complemento y establecer el estilo que desee. Otra sugerencia aquí sugiere editar el plugin en sí mismo, eso es genial si no planeas actualizarlo alguna vez; de lo contrario, es mejor que dejes el código del complemento tal como está, y solo agregas algunos js personalizados.