CSS和表格上的字体颜色

Question

我正在基础上制作新闻稿模板。 下表由2个<th> ，其内容为“ Reservationnumber”和“ 23425-FF3234”。 我有大约60个<th> 。 我想给字体加上颜色。 如果在每个<strong>标记和<th>标记上设置类class="reservation__fontcolor" ，则可以使该工作正常。 但是，当我将它放在包围<th>标记的桌子上时，它不起作用。

有没有一种方法可以在更全局的级别上设置class="reservation__fontcolor" ，所以我不必复制/粘贴class标签60次？

在下面的代码中，我尝试在<th>标记上设置<th class="small-6 large-6 columns first reservation__fontcolor"> ，它们都包含<td>标记。 但这是行不通的。 为什么？

CSS

.reservation__fontcolor {
        color: red;
       }

HTML

<table align="center" class="wrapper header float-center bgcolor">
  <tbody>
    <tr>
      <td class="wrapper-inner">
        <table align="center" class="container" style="background-color:transparent">
          <tbody>
            <tr>
              <td>
                <!-- Reservationnumber -->
                <table class="row collapse">
                  <tbody>
                    <tr>
                      <th class="small-6 large-6 columns first reservation__fontcolor">
                        <table>
                          <tbody>
                            <tr>
                              <th>
                                <strong>Reservationnumber:</strong>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </th>
                      <th class="small-6 large-6 columns last">
                        <table>
                          <tbody>
                            <tr>
                              <th>
                                23425-FF3234
                              </th>
                              <th class="expander"></th>
                            </tr>
                          </tbody>
                        </table>
                      </th>
                    </tr>
                  </tbody>
                </table>                             
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您可以将class Reservation__fontcolor添加到表中，然后将其添加到CSS中：

.reservation__fontcolor tr th{
    color: red;
}

这就像一条路径，您可以按以下方式读取它：tr标记内的所有th标记，类Reservation__fontcolor的元素内的所有标记均已定义属性。

这可以防止该类在表外的任何其他标签获取该属性，例如，发生以下情况：

th{
    color: red;
}

如果您希望th和td标签都获得相同的属性，但仅在类表中时，可以执行以下操作：

.reservation__fontcolor tr th, .reservation__fontcolor tr td{
    color: red;
}

我认为这些概念之间的差异是了解其工作原理并将其应用于不同情况的关键。

祝好运。

Answer 2

您可以使用一个表格，也可以按标签进行颜色设置。 我创建了一个enter code here 捣鼓

Answer 3

您将需要使用嵌套CSS选择器 。

在下面我用尽可能小的范围的工作只是为了弄清楚这个想法的例子，但是，它可以在第一次启动table到达th通缉。

CSS：

<style>
    table.reservation__fontcolor th{
        color red;
    }
</style>

HTML：

<table class="row collapse reservation__fontcolor">
   <tbody>
      <tr>
        <th class="small-6 large-6 columns first ">
            <table class="reservation__fontcolor">
                <tbody class="">
                    <tr>
                        <th>
                            <strong>Reservationnumber:</strong>
                        </th>
                    </tr>
                </tbody>
            </table>
        </th>
        <th class="small-6 large-6 columns last">
            <table>
                <tbody class="reservation__fontcolor">
                    <tr>
                        <th>
                            23425-FF3234
                        </th>
                        <th class="expander"></th>
                    </tr>
                </tbody>
            </table>
        </th>
    </tr>
    </tbody>
</table>