覆盖通过JS使用CSS添加的内联样式

Question

一个js插件正在添加一种令我头疼的风格：

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

所以我试过这个：

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;
}

但仍然没有。

Answer 1

与其他答案相反，可以使用CSS覆盖内联样式：

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

我猜想极长的选择器可能没有击中元素。

我有一个与Janrain插件类似的z-index问题，由此解决了：

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

在您的情况下，您可能需要：

    z-index: 0 !important;

Answer 2

内联样式将胜过任何选择者。 要么自己在javascript中重置样式，要么修补插件......说实话，听起来并不是特别好。 :)

Answer 3

内联样式总是覆盖外部和内部css，加上插件使用!important子句（非常糟糕的练习！），所有这些都使得无法仅使用css修复它。 我估计你将不得不使用一些自定义的j来覆盖插件设置。

也许最好的方法是检查是否可以使用插件指定回调函数并根据需要设置样式。 另一个答案在这里建议编辑插件本身，如果你不打算更新它，这很酷 - 否则你最好不要保留插件代码，只需添加一些你自己的定制js