Question

我的网站上有多个表格。

它们每个都由以下CSS设置：

#content table { border: 3px solid #FFF; }
#content table tr th { color: #FFF; background-color: #2a2d32; font-size:12px;}
#content table tr td, #content table tr th { border: 1px solid #FFF; padding: 5px; text-align: center; line-height: 1.4em; font-size:12px;}

但是我想挑出一个特定的桌子来获得独特的造型有问题的表格在这里：

<table cellspacing="0" cellpadding="0" width="100%" >
<tr style="background-color:#ebe7e5;">
<td>Income </td>
<td>€ </td>
<td>€ </td>
</tr>
<tr class="PL">
<td>Sales</td>
<td><?php echo $cBalance; ?>3,549</td>
<td></td>
</tr>
<th><strong>Total Income</strong></th>
<th></td>
<th><?php echo $pProductionCapacity; ?>3,705</th>
</tr>

<tr style="background-color:#ebe7e5;">
<td>Expenses </td>
<td>€ </td>
<td>€ </td>
</tr>
</table>

我已经尝试在此表上放置一个id，然后尝试使用CSS，但似乎是主CSS（如上所示）仍然覆盖我的更改。有人可以帮忙吗？

例如我添加了：

<table id="unique" cellspacing="0" cellpadding="0" width="100%" >

使用CSS如下：

#unique td th {background-color: red;}

但它不起作用。

/////////////////////////////////////////////// //////////////////////////////////

好的，所以我尝试过更改为：

#unique td {background-color: red;}
#unique th {background-color: red;}

然而，这并没有改变红色，它仍然是初始CSS的灰色：

#content table { border: 3px solid #FFF; }
#content table tr th { color: #FFF; background-color: #2a2d32; font-size:12px;}
#content table tr td, #content table tr th { border: 1px solid #FFF; padding: 5px; text-align: center; line-height: 1.4em; font-size:12px;}

Answer 1

#unique td th表示：“#unique里面的td内的每一个”。如果你的意思是“每个td以及每个内部#unique”，你需要的是#unique td, #unique th

Answer 2

因为您对所有表格的选择器都非常具体，所以您可能需要更加具体地对待您的唯一表格，如下所示：

#content table#unique tr td, #content table#unique tr th { ... }

您的选择器中的table实际上是多余的tr，td和th始终位于表格中。您可以通过执行以下操作简化选择器：

#content th, #content td { ... }

然后您的唯一表格将是：

#content #unique th, #content #unique td { ... }

修改

这是我的意思http://jsfiddle.net/BNV22/

您需要从选择器中丢失不必要的table tr，或者您需要保持选择器相同，但将table#unique添加到要应用于唯一表的规则中。

Answer 3

您可以使用#content table#unique，并且必须将此代码放在#content table规则

之后

或者你可以简单地省略普通表的#content

CSS：表的独特样式

好的，所以我尝试过更改为：

3 个答案:

修改