覆盖现有 CSS 表规则的最佳方法是什么？答案

【问题标题】：What is the best way to override an existing CSS table rule?覆盖现有 CSS 表规则的最佳方法是什么？
【发布时间】：2010-12-03 21:44:50
【问题描述】：

我们正在使用 joomla 模板，创建者在 constant.css 中定义了规则

table   
{
  border-collapse:collapse; 
  border:0px; 
  width:100%;
}

当我需要我自己的带有自定义参数（宽度、边框等）的表格时，噩梦就开始了。如果我使用通用 html 参数，它们将不起作用，因为 css 规则更重要（CMIIW）。如果我使用 style=param，我想我无法控制表格在 IE 中的查找方式，最多包含 7 个。

那么有没有一种通用的方法来解决这个问题，或者我只需要评论规则（就像我已经做过的那样）。

另外，如果我说 joomla 模板的创建者不应该默认定义像 width:100% 这样的一般规则，我说得对吗？我的意思是如果他们不希望他们的模板的用户抱怨。

【问题讨论】：

【解决方案1】：

方法一

在您创建的所有表上放置一个类，并创建一个像table.classname 这样覆盖属性的选择器。由于您应该只将表格用于表格数据，因此添加类名是有意义的，因为将其他样式（颜色、边框）应用到所有表格会更容易。

要覆盖border-collapse: collapse，请使用border-collapse: separate 和border-spacing: 4px（或任何值）。这在 IE6 中不起作用，在 IE7 中也可能不起作用。
对于表格的边框，只需添加border 规则。如果您想在单个单元格上设置边框，请定位 table.classname td 并将 border 规则放在那里。
要重置宽度，请使用width: auto 或设置明确的宽度。

另一种方法是查找模板中使用的所有表，向它们添加一个类，然后更改原始规则以使用该类。然后，任何没有该类的表都将使用默认的表属性。

这可能很难实现，因为 Joomla 模板通常具有模块和组件覆盖，这意味着在许多地方会有很多表。祝你好运！ :p

您是对的，在通用表格元素上设置这些样式（至少width）对于模板来说是个坏主意。尽管他们可能使用表格进行布局这一事实无论如何都不是一个好兆头。

【讨论】：

【解决方案2】：

table{ border-collapse:collapse; border:0px; width:100%; }

以下内容应覆盖上述 css 规则：

.classofyourtable { width:50%; }

#idofyourtable { border:1px; width:20px; }

请注意以下 CSS 级联优先级（1 为最高）：

优先级较低的规则将被较高的规则覆盖。

【讨论】：

【解决方案3】：

将样式应用于类或 id 都会覆盖通用标记样式中的样式。

【讨论】：

【解决方案4】：

有很多方法可以做到这一点。正如 Marius 所说，课程或 ID 会有所帮助。

假设您在 body 元素 (<body id="foo">) 上放置了一个 id，然后您可以使用

覆盖内置表格样式

#foo table {
    width: auto;
}

或者，如果您只想重新设置某些表格的样式，请尝试使用类 (<table class="foo">)：

table.foo {
    width: 25em;
}

但是，是的，为什么不直接编辑模板的 CSS 来做你想做的事呢？

【讨论】：

表格根据显示的数据（使用php）具有灵活的宽度，因此每次的值都会不同。在这种情况下，样式参数是可以的。但是在 IE6 和 IE7 中仍然可以用 css 控制单元格之间的间距吗？问题是如果我想显示一个带有填充单元格和它们之间透明 1px 空间的表格，我知道如何使用纯 html 来完成它，并且它在所有浏览器中看起来都不错。但是迁移到 CSS 会使任务变得更加困难。

【解决方案5】：

在现有规则之下应用另一条规则：

table
{
    background-color: Navy;
    width: 100%;
}

/* override existing rule: */

table
{
    width: 960px;
}

当一个 CSS 规则被指定两次时，浏览器将使用最后一个。

是的，你是对的——Joomla 的正确方法是使用类来实现命名空间。覆盖默认 CSS 规则是不好的做法。

【讨论】：