Question

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我正在思考以下几点：

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的直接子节点。

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

Answer 2

你可以试试这个：它们被称为suedo选择器。

table tr th:first-child{
      background-color: green;
    }

样式只在表中确定？

2 个答案: