Question

我有一个相当简单的CSS问题。

我想创建一个遵循特定格式的表。我想在同一页面上以不同方式格式化几个表。

我有这个：

CSS：

table.firstTable
{
    border: 1px solid black;
}
td.firstTable
{
    border: 1px solid black;
}
th.firstTable
{
    border: 1px solid black;
    background: #00003f;
    font-color: #cfffff;
}
table.secondTable
{
    border: 1px solid red;
}
td.secondTable
{
    border: 1px solid red;
    font-family: sans-serif;
}
th.secondTable
{
    border: 1px solid red;
    background: #cfffff;
    font-color: #00003f;
}

我可以用这种方式创建表的唯一方法是：

HTML：

<table class="firstTable">
  <tr>
    <th class="firstTable">Item</th>
    <th class="firstTable">Quantity</th>
    <th class="firstTable">Price</th>
  </tr>
  <tr>
    <td class="firstTable">0-001</td>
    <td class="firstTable">Computer</td>
    <td class="firstTable">$299.99</td>
  </tr>
  ...
</table>

<table class="secondTable">
  <tr>
    <th class="secondTable">Customer ID</th>
    <th class="secondTable">Total Sales</th>
  </tr>
  <tr>
    <td class="secondTable">10001</td>
    <td class="secondTable">$39.94</td>
  </tr>
  ...
</table>

我知道有一种更好的方法来实现这一点，而不是不断重复“firstTable”和“secondTable”类。

我尝试过这样做：

CSS：

#firstTable table
{
    border: 1px solid black;
}
#firstTable th
...

然后

HTML：

<div id="firstTable">
<table>
...
</table>
</div>

但它不起作用。

我错过了什么？

Answer 1

你应该更多地了解selectors（这是非常基本的CSS）。

您可以使用element.withClass element选择具有类的元素内的元素。这样您就不需要给所有td和th一个类，只需要父元素，在这种情况下为table：

HTML：

<table class="firstTable">
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>0-001</td>
    <td>Computer</td>
    <td>$299.99</td>
  </tr>
  ...
</table>

<table class="secondTable">
  <tr>
    <th>Customer ID</th>
    <th>Total Sales</th>
  </tr>
  <tr>
    <td>10001</td>
    <td>$39.94</td>
  </tr>
  ...
</table>

CSS：

.firstTable
{
    border: 1px solid black;
}
.firstTable td
{
    border: 1px solid black;
}
.firstTable th
{
    border: 1px solid black;
    background: #00003f;
    color: #cfffff;
}
.secondTable
{
    border: 1px solid red;
}
.secondTable td
{
    border: 1px solid red;
    font-family: sans-serif;
}
.secondTable th
{
    border: 1px solid red;
    background: #cfffff;
    color: #00003f;
}

和demo

PS：font-color不是CSS属性，应该只是color

Answer 2

我认为您正在寻找的是CSS3 nth-of-type选择器。

CSS：

table:nth-of-type(odd) {
    border: 1px solid black;
}
table:nth-of-type(odd) td {
    border: 1px solid black;
}

这应该允许您选择偶数和奇数表，如示例here

请注意，这不适用于旧版本的IE（8及以下版本），但您应该可以使用https://stackoverflow.com/a/4742560/3387154

来解决这个问题

Answer 3

这不起作用吗？

.firstTable th td
{
border: 1px solid black;
}

.firstTable th
{
background: #00003f;
color: #cfffff;
}

.secondTable
{
border: 1px solid red;
}

.secondTable th
{
background: #cfffff;
color: #00003f;
}

.secondTable td
{
font-family: sans-serif;
}

<table class="firstTable">
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>0-001</td>
<td>Computer</td>
<td>$299.99</td>
</tr>
</table>

<table class="secondTable">
<tr>
<th>Customer ID</th>
<th>Total Sales</th>
</tr>
<tr>
<td>10001</td>
<td>$39.94</td>
</tr>
</table>

简单的CSS：格式化多个表

3 个答案: