停止 element.style 以覆盖我的 CSS 样式答案

【问题标题】：Stop element.style to overwrite my css styles停止 element.style 以覆盖我的 CSS 样式
【发布时间】：2015-02-24 19:13:40
【问题描述】：

我正在用 ruby on rails 开发一个表单，在该表单中我使用的是滑块 (http://seiyria.github.io/bootstrap-slider/)。

问题是我有这个element.style，它会像这样覆盖我的css：

对于存储字段：

当我动态添加一个新字段时：

这是什么element.style？

为什么element.style 会覆盖width？

这个element.style width 在第一种情况下的值是0px，在第二种情况下是152px，我不知道为什么。

有什么帮助吗？

【问题讨论】：

你应该阅读CSS specificity。 style 属性很可能是由 javascript 小部件添加的。您只能使用不受欢迎的!important rule 覆盖样式属性

【解决方案1】：

将!important 添加到您不想被覆盖的规则中。例如。 .slider.slider-horizontal {width: 210px}

（使用 !important 经常被人反对，因为它最初可以启用结构不佳的 CSS，然后继续使你的样式变得更加混乱，因为你开始不得不使用更多的 !important 来覆盖之前的 !important，但也有绝对是你必须使用它的时候）

【讨论】：