覆盖div的内联样式

Question

我使用以下代码片段覆盖了div的内联样式。

.gantttoolbar {
    height: 50px;
    display: block !important;
}

这是重写CSS样式的正确方法吗？ 或在上述代码中不使用！important的方法还有其他方法吗？

Answer 1

您可以使用[样式]技巧：

.gantttoolbar[style] {
    height: 50px; // Use !important to override height too
    display: block !important;
}

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

Answer 2

在这种情况下，无需使用[style] css选择器，因为该元素已经有一个关联的类。 仅需要将[style]用于选择没有与之关联的类或ID的元素。

不幸的是，！important是覆盖内联样式的唯一纯css方法，或者您可以使用javascript清除元素上的样式，从而不必使用重要的标记。 为此，您将执行以下操作：

document.querySelector('.gantttoolbar').removeAttribute('style');

这是一个小提琴http://jsfiddle.net/jRxzH/

Answer 3

是的，这是覆盖内联CSS的正确方法。

但我建议不要覆盖CSS，使用CSS类并使用它，而不要使用内联CSS。 它将节省您的加载和渲染速度。