Reemplazar los estilos en línea a través de JS añadido con CSS

Question

Un plugin de JS es la adición de un estilo que me está dando algunos dolores 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 aún nada.

Answer 1

al contrario de las otras respuestas, es posible anular los estilos en línea con CSS:

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

yo supongo que el selector de tiempo extremadamente largo, no podría estar golpeando el elemento.

que tenían un problema de índice z similar con el plugin JanRain que fue resuelto por esta:

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

En su caso, es probable que necesite:

z-index: 0 !important; 

Answer 2

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. :)

Answer 3

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 solucionarlo solo con css. Creo que deberás usar algunos js personalizados para anular la configuración del complemento.

tal vez la mejor manera sería verificar si puede especificar una función de devolución de llamada con el complemento y establecer el estilo que desee. Otra sugerencia aquí sugiere editar el plugin en sí, 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 simplemente agregas js a tu propio