jquery - 我可以禁用特定元素的样式定义吗？

Question

我正在使用其他人的代码，该代码将整个网站构建在一个非常烦人的表结构上，每个 <td> 的宽度为 100%元素...如果我有时间，我不会在这里问这个问题，只是重写整个该死的东西，但这是一个相当大的网站，需要我几周的时间才能重写，而且我需要 jquery 插件数据表才能工作。但是，由于条目 #container td { width: 100%; padding: 0; }在主要样式定义中，整个表格完全困惑:-(

那么...有没有办法让 CSS 在除 <table id="exception"> 之外的所有表上使用这些默认定义它应该在哪里忽略这些设置并使用数据表附带的设置？

问题是优先级 - 数据表的代码为 table.dataTable td { padding: 3px 10px; }例如，它被忽略，因为 #container td优先...

再说一遍，尽管我很愿意，但此时我不能破坏原来的网站结构。我可以编辑某些元素的数据表 CSS，但我还必须删除 width: 100%这个表的内容仍然允许数据表实现自己的定义......

我在这个网站的一个页面上使用 jQuery，所以也许我可以用它来清除这些定义，但这也将清除数据表设置的定义...

有什么想法(除了“那就不要使用表格”)？

Answer 1

当然，你可以通过稍微调整CSS来做到这一点(除非我读错了):

table:not(#exception) {
  /* Target all tables except the one with ID exception. */
}

可能还可以使用其他细微的调整，但这取决于布局。

:not 所有主流浏览器都支持选择器，但旧版本的 IE(8 及之前版本)不支持。解决这个问题的一种方法是使用 Selectivizr图书馆。

"Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest."

正如您提到的，您正在使用 DataTables，您正在使用 jQuery，因此使用 Selectivizr 仅意味着包含 <script> ，然后 :not将在旧版本的 IE (6-8) 中运行。