将元素下的所有元素与项目的外部样式隔离的正确方法

Question

我刚刚在我的项目中添加了一个新的js日历。日历显示如下-

<div style="position: absolute;" id="container">
    <table cellspacing="0" cellpadding="0" align="center" class="DynarchCalendar-topCont">         
       <tbody>
          <tr><td>
             // lots of elements inside
          <td><tr>
       </tbody>
     </table></div>

问题是，由于我的项目中的一些样式，日历的视图似乎被扭曲了，比如-

div#sel_filters div.fields div {
    margin-left: 10px;
}

div.filters div.fields div {
    float: left;
    padding: 7px 0 0;
}
... and many more which apply to the elements inside

有许多css文件的项目。因为我的日历出现在div.fields中，所以上面的样式也适用于它。我不会考虑改变上面的项目样式，因为它们可能会影响其他人。

不允许jscalendar.css文件中的样式以外的任何样式影响它的正确、干净的方法是什么？我是否只有这样一个选项:将!important应用于jscalendar.css中的样式，搜索所有额外的属性，这些属性仅由项目css设置，并手动设置它们为0或空。

如果很重要，我可以在项目css文件之前/之后自由地包含jscalendar.css。

Answer 1

如果你在其他CSS文件之后加载你的jscalendar.css，它应该会覆盖其他CSS指令。如果仍然有问题，可以在div中添加一个行为不同的类，然后在其他类后面添加CSS指令来覆盖前面的类：

div.filters div.fields div.yourClass {
    float: none;
    padding: 0;
    margin: 0;
}

Answer 2

不幸的是，要做到这一点，正确的方法是修复站点的CSS。您通过将样式直接应用于元素(如div的元素)所做的操作将导致未来维护或更改的痛苦。

避免不惜一切代价直接设计元素的样式，尽可能多地使用类，然后使用ID。使用带有类或ID的元素，如div.foo或div#foo，但不能直接使用元素。

你可以在你的日历CSS中使用重要的！，但我会花时间修复你的网站的CSS，就像你升级日历插件一样，你又一次遇到了痛苦的时刻。

因此，现在就接受打击，看看已经学会了如何正确地做事情的积极因素，并且永远不会再犯同样的错误:)

Answer 3

将唯一的id应用于容器并更改CSS以反映从该容器派生的传统……直接的样式会带你到你想去的地方，但是如果你不得不在以后的道路上维护它，那么从长远来看，它会让你付出代价……

但我必须同意Moin Zaman的观点，如果你遇到了这个障碍，如果你现在不注意它，它肯定会再次发生