覆盖div的内联样式

Question

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

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

这是覆盖CSS样式的正确方法吗？或者在上面的代码中没有使用！important有没有其他方法来实现这一点？

Answer 1

你可以使用[style]技巧：

.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。它将节省您的加载和渲染速度。