logo标签列表

如何最好地覆盖现有的CSS表格规则？

csstemplatesjoomla
4
我们正在使用一个 Joomla 模板，其中创建者在 constant.css 中定义了规则。
table   
{
  border-collapse:collapse; 
  border:0px; 
  width:100%;
}

当我需要自己的带有自定义参数（宽度、边框等）的表格时，噩梦开始了。如果我使用一般的HTML参数，它们不起作用，因为CSS规则更重要（如有错误请指正）。如果我使用style=参数，我估计我无法控制IE 7及以下版本的表格外观。
那么，有没有通用的方法来解决这个问题，还是我只需要注释掉规则（就像我已经做的那样）？
此外，如果我说joomla模板的创建者不应该默认定义诸如width:100％之类的通用规则，这样他们的模板用户就不会抱怨，我是不是正确的？
5个回答
3
{ border-collapse:collapse; border:0px; width:100%; } 以下内容将覆盖上述CSS规则：
.classofyourtable { width:50%; }
#idofyourtable { border:1px; width:20px; }
请注意以下CSS级联优先级（1为最高）：
  1. 内联
  2. id
  3. 类
  4. 标签名
优先级较低的规则将被更高的规则覆盖。
3

方法1

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

  • 要覆盖 border-collapse: collapse，请使用 border-collapse: separate 和 border-spacing: 4px（或任何值）。这在IE6中不起作用，在IE7中也可能不起作用。
  • 如果要在表格周围添加边框，请添加 border 规则。如果要对单个单元格设置边框，请针对 table.classname td 进行定位并在那里放置 border 规则。
  • 要重置宽度，请使用 width: auto 或放置显式宽度。

方法2

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

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

你是正确的，在通用表格元素上设置这些样式（至少是 width）对于模板来说是不好的想法。尽管他们可能正在使用表格进行布局，但这并不是一个好兆头。

2

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

假设您在body元素上放置了一个id（<body id="foo">），那么您就可以使用以下方式覆盖内置的表格样式

#foo table {
    width: auto;
}

或者，如果你只想重新设计特定的表格，可以尝试使用一个类（<table class="foo">）：
table.foo {
    width: 25em;
}

不过，为什么不直接编辑模板的CSS以实现你想要的效果呢？

表格的宽度根据所显示的数据而灵活变化（使用php），因此每次值都会不同。在这种情况下，样式参数是可以的。但是，在IE6和IE7中是否仍然可以使用CSS控制单元格之间的间距呢？问题是，如果我想显示一个填充了单元格并且它们之间有透明1px空间的表格，我知道如何使用纯html来完成它，并且在所有浏览器中都看起来很好。但是，转到css会使任务更加困难。 - Maksee
1
将样式应用于类或ID会覆盖一般标签样式中的样式。
-2

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

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

/* override existing rule: */

table
{
    width: 960px;
}

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


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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接