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

Question

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

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

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

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

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

Answer 1

方法1

在您创建的所有表上放置一个类，并创建一个像

table.classname

这样的选择器来覆盖属性。由于您应该只将表格用于表格数据，因此添加类名是有意义的，因为更容易将其他样式（颜色、边框）应用于所有表格。

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

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

你是对的，在通用表格元素上设置这些样式（至少是

width

）对于模板来说是一个坏主意。尽管他们可能使用表格进行布局这一事实无论如何都不是一个好兆头。

Answer 2

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

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

.classofyourtable {
  width:50%;
}

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

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

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

Answer 3

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

假设您在 body 元素上放置了一个 id (

<body id="foo">

)，那么您可以使用

覆盖内置表格样式

#foo table {
    width: auto;
}

或者，如果您只想重新设置某些表格的样式，请尝试使用类（

<table class="foo">

）：

table.foo {
    width: 25em;
}

但是，为什么不直接编辑模板的 CSS 来执行您想要的操作呢？

Answer 4

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

Answer 5

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

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

/* override existing rule: */

table
{
    width: 960px;
}

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

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