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文件中的任何样式以外的任何样式影响它的正确清洁方法是什么。我只有这个选项可以对jscalendar.css中的样式应用！important，并搜索所有额外属性，这些属性仅由项目css设置，并手动设置为0或null。

如果重要，我可以在项目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。使用包含div.foo或div#foo等类或ID的元素，但不能直接使用元素。

你现在可以在你的日历CSS中使用！重要但是我会花时间来修复你网站的CSS，就像你升级日历插件一样，你再次看到痛苦的时候。

所以现在就点击，看看已经学会了如何正确地做事并且再也不会重复同样的错误：...

Answer 3

将一个唯一的ID应用到容器中并更改您的CSS以反映源自此的遗产......直接造型将带您到达您想去的地方，但如果您必须维护，它将从长远来看耗费您这是后来的......

但我必须同意Moin Zaman，如果你遇到这个障碍，如果你现在不照顾它，它必然会再次发生

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

3 个答案: