html - Joomla 模块 CSS 覆盖

Question

我已经构建了一个 Joomla 模块，但是它只是一个特定计算器的回声。回声中有一个表格用于格式化目的。在 Joomla 之外使用整个脚本，一切看起来都很好。但我意识到 Joomla 将其 CSS 强加到我的 table 上。我的 CSS 应该有效并已加载。非常简单:

<table class="joomla_tables"  cellpadding="5" cellspacing="0">
...

.joomla_tables{
border:0;
padding:5px;
}

我已经用 Firebug 检查过了。但是 Firebug 也说我的 table 继承了它的风格

tr, td {
border: 1px solid #DDDDDD;
}

我认为来自 *beez_20* 模板附带的名为 nature.css 的文件。仅这一点小改动就破坏了我 table 的整体外观，这真是令人恼火。而且我无法找到如何在不更改模板 CSS 的情况下更改表格样式的解决方案。 (因为它只会对我有所改变，但不会对安装此模块的这些用户产生影响)。所以我想知道为什么 Joomla 不使用我的 CSS 而是用它自己的 CSS 覆盖它？

Answer 1

这两个选择器是完全不同的，你用这个 joomla_tables 做的是你定位 table 其中 joomla 定位 tr 和 td 所以你需要

.joomla_tables tr, 
.joomla_tables td {
   border: 0;
   padding: 5px;
}

现在上面的选择器将选择所有嵌套在具有 joomla_tables 类的元素内的 tr 和 td。

Joomla 的目标是 tr 和 td，你的目标是 table，所以使用你的选择器，它确实摆脱了 table border 但你仍然会看到它，因为 td 有边框，所以只需使用我提供的选择器，它就会完美地定位元素。

为了让它更严格，你可以使用

table.joomla_tables tr, 
table.joomla_tables td {
   /* Styles goes here */
}

Note: tr don't have borders and paddings, it's the td which has borders (It can have borders if you've border-collapse: collapse;)