Question

我在基金会制作新闻稿模板。下表由2个<th>组成，其中包含内容＆＃34; Reservationnumber＆＃34;和＆＃34; 23425-FF3234＆＃34;。我有大约60个<th>。我想给字体一个颜色。如果我在每个class="reservation__fontcolor"标记和<strong>标记上设置了类<th>，我就可以完成这项工作。但是当我将它放在围绕<th>标签的桌子上时，它无效。

有没有办法可以在更全局的范围内设置class="reservation__fontcolor"，所以我不必复制/粘贴类标签60次？

在以下代码中，我尝试在<th class="small-6 large-6 columns first reservation__fontcolor">标记上设置<th>，其中包含<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;
}

它就像一条路径，您可以按如下方式阅读：所有th标签，在tr标签内，在类retain_2fontcolor的元素内部获取定义的属性。

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

th{
    color: red;
}

如果你想要th和td标签获得相同的属性，但只有在类表内时，你可以这样做：

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

我认为这些概念之间的区别是理解它是如何工作以及在不同情况下应用它的关键。

祝你好运。

Answer 2

您可以使用一个表格，也可以按标记颜色。我创建了enter code here fiddle

Answer 3

您需要使用Nested CSS selector。

在下面的示例中，我正在使用最小范围来计算这个想法，但是，它可以从第一个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>

css和表格上的字体颜色

3 个答案: