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

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

仍然没有任何反应。

- Jamie Hutber

---

也许你应该用 JavaScript 进行覆盖。 - SRN

是的，我并不想采用JS覆盖的方法。而且我还得监听JS何时被激活，因为插件本身加载就需要一些时间。嗯，虽然我一开始认为这是唯一的选择，但我希望还有其他选项。 - Jamie Hutber

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;

- Jeff Clemens

Answer 2

行内样式将优先于任何选择器。可以在javascript中自己重置样式或者对插件进行修复... 说实话，这个插件似乎写得不是很好。 : )

- John Green

---

@JosephtheDreamer，内联样式有!important - 请检查问题。 - Luca

JS似乎是唯一的选择，但我必须想出一个好的解决方案，并且以某种方式监听JS何时变为活动状态。 - Jamie Hutber

@JohnGreen-PageSpike 我的评论是回复Joseph的评论的，他随后删除了那条评论，关于使用!important来覆盖内联样式，我的观点是——无法实现，因为插件也使用!important设置内联样式。他删除自己的评论使得我的评论毫无意义。 - Luca

Answer 3

内联样式始终优先于外部和内部 CSS，再加上插件使用了 " !important " 语句（非常不好的做法！），这些因素共同使得仅仅使用 CSS 无法解决问题。我认为你需要使用一些自定义 js 来覆盖插件设置。

也许最好的方法是检查是否可以指定回调函数，并按照你的要求设置样式。这里的另一个答案建议编辑插件本身，如果你不计划更新它，那很酷 - 否则最好保留插件代码，并添加一些自己的专属 js。

- Luca

---

是的，问题在于它是一个外部加载的插件，所以我不认为这是一个选项 :( 但无论如何还是谢谢 :) - Jamie Hutber