将元素下的所有元素与项目的外部样式隔离的正确方法
我刚刚在我的项目中包含了一个新的 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 或 null。
如果重要的话，我可以在项目 css 文件之前/之后包含 jscalendar.css。
I just included a new js calendar in my project. The calendar displays like this -
<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>
The problem is that the view of the calendar is appearing distorted due to some styles in my project like this -
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
There are many css files of the project. Since my calendar appears inside div.fields, the above styles apply to it as well. I am not considering altering the above project styles , as they may affect others.
What is the proper clean way of not allowing any styles other than those in the jscalendar.css file to affect it. DO I only have this option of applying !important to the styles in the jscalendar.css, and searching all the extra attributes, which are only set by project css, and setting them 0 or null manually.
In case it matters, I am free to include the jscalendar.css before/after project css files.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您在其他 CSS 文件之后加载 jscalendar.css，它应该会覆盖其他 CSS 指令。
如果仍然有问题，您可以向 div 添加一个行为不同的类，然后在其他指令之后添加一个 CSS 指令来覆盖之前的指令：
If you load your jscalendar.css after the other CSS files it should overwrite the other CSS directives.
If you still have problems, you could add a class to the divs that should behave differently and then add a CSS directive after the others to overwrite the previous ones:
不幸的是，正确的方法是修复网站的 CSS。您通过直接将样式应用于
div等元素所做的事情将会给未来的维护或更改带来巨大的痛苦。不惜一切代价避免直接设置元素样式，尽可能使用类，然后使用 ID。使用带有类或 ID 的元素，例如
div.foo或div#foo，但不能直接使用元素。现在，您可以在日历 CSS 中使用 !important ，但我会花时间修复您网站的 CSS，就好像您升级日历插件后，您会再次遇到痛苦的时刻一样。
因此，现在就接受打击，看看学会如何正确做事的积极一面，不要再犯同样的错误:)
The proper way to do this unfortunately is to fix your site's CSS. What you're doing by applying styles to elements directly such as
div's is going to lead to a world of pain for future maintenance or changes.Avoid styling elements directly at all costs, use classes as much as possible, then IDs. Use elements with classes or IDs like
div.fooordiv#foobut not elements directly.You could get away with !important in your calendar CSS for now but I'd spend that time fixing your site's CSS, as if ever you upgrade the calendar plugin you're looking at painful times again.
So take the hit now, look at the positive of having learnt how to do things properly and never repeat the same mistake again :)
对容器应用一个唯一的 id 并更改你的 CSS 以反映从中派生的遗产...直接样式将带你到达你想去的地方，但从长远来看，如果你必须在以后维护它，它会让你付出代价道路……
但我必须同意 Moin Zaman 的观点，如果你遇到这个障碍，如果你现在不处理它，它一定会再次发生
apply a unique id to the container and change your CSS to reflect the heritage that derives from that... direct styling will get you to where you wanna go, but its gonna cost you in the long run if you have to maintain this later down the road...
but i must agree with Moin Zaman, if you hit this obstacle, its bound to happen again if you dont take care of it right now