Question

我正在使用其他人的代码，其中整个网站构建在一个非常恼人的表格结构上，每个<td>元素的宽度为100％...如果我有时间，我不会问这个在这里简单地重写整个darn的东西，但它是一个相当大的网站，需要几周时间才能重写，我需要jquery插件数据表来工作。但是，由于主样式定义中的条目#container td { width: 100%; padding: 0; }，整个表格完全搞砸了： - （

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

问题是优先级 - 例如，datatables的代码为table.dataTable td { padding: 3px 10px; }，因为#container td具有优先权而被忽略...

同样，尽管我想，我现在也不能搞乱原来的网站结构。我可以编辑某些项目的数据表CSS，但我还必须删除这一个表的width: 100%内容，以便STILL允许数据表实现自己的定义......

我在这个网站上的一个页面上使用jQuery，所以也许我可以用它来清除这些定义，但那时也会清除datatables设置的定义......

想法（除了“不要使用表格”）？

Answer 1

当然你可以通过略微调整它来做到这一点（除非我误读）：

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

可能会有其他轻微的调整，但这取决于布局。

所有主流浏览器都支持:not选择器，但IE旧版本（8及之前版本）不支持。解决此问题的一种方法是使用Selectivizr库。

“Selectivizr是一个模拟CSS3伪类的JavaScript实用程序和Internet Explorer 6-8中的属性选择器。简单地包括你的页面中的脚本和selectivizr将完成剩下的工作。“

如你所说，你正在使用DataTables，你正在使用jQuery，因此使用Selectivizr只是意味着包含<script>，然后:not将在旧版本的IE中运行（6-8）

Answer 2

也许你可以申请！重要的是表id =“exception”css规则。

Answer 3

您是否尝试过!important？

table.dataTable td { width: auto !important; }

另一种方法是制作更具体的选择器：

#container table.dataTable td { width: auto; }

哪个应该比#container td

更具体

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

3 个答案: