html - 仅在表中设置某些样式？

Question

我希望能够在 HTML 表格中仅设置某些表格标题的样式。表头一共有8个，我想选4个。

我不允许更改任何 HTML 或添加任何 JavaScript。只有 CSS。该问题的 JSFiddle 在这里:https://jsfiddle.net/gk0bwtvs/38/

table tr td {
  padding: 5px;
}
table {
  border: pink 5px;
  border-style: double;
}
table tr:nth-child(even) {
  background-color: #aaa;
}

<table>
  <tr>
    <td>&nbsp;</td>
    <th>January</th>
    <th>March</th>
    <th>June</th>
    <th>September</th>
  </tr>
  <tr>
    <th>Temperature</th>
    <td>Cold</td>
    <td>Maple syrup season!</td>
    <td>Warmer</td>
    <td>Cooling down</td>
  </tr>
  <tr>
    <th>Precipitation</th>
    <td>Snow</td>
    <td>Mud</td>
    <td>Rain</td>
    <td>Rain, but not for long</td>
  </tr>
  <tr>
    <th>Amount of Daylight</th>
    <td>Very little</td>
    <td>Even daylight and night</td>
    <td>Lots of daylight</td>
    <td>Even daylight and night</td>
  </tr>
  <tr>
    <th>Recommended Outerwear</th>
    <td>Heavy jacket</td>
    <td>It depends!</td>
    <td>Usually no jacket</td>
    <td>Light jacket sometimes</td>
  </tr>
</table>

我在想一些事情:

table tr th+td:not(th+th) {
  color: green;
}

或者也许:

table tr th+td {
  color: green;
}

然而，这些似乎都不起作用。

我想为“温度”、“降水量”、“日光量”和“推荐的外套”设置样式，而不是月份标题。此外，我不能为此使用 nth-child 或 nth-of-type 选择器。

编辑:选择答案，谢谢!

Answer 1

根据您提供的 jsfiddle，这是有效的选择器:

table tr + tr > th {
  background-color: red;
  color: #FFF;
}

解释:它不会选择第一个 tr 并选择 tr 的下一个 tr，它会选择 tr 的直接子节点。

没有使用第 nth-child 或 nth-of-type。希望这会有所帮助。