如何在CSS中设置col的特定单元格的样式

Question

我有一个包含 5 个顶级列的表格，每个顶级列跨越 4 个列。 我想对每个顶级列的最后一个子列应用不同的样式。 应该怎么做。

<table>
   <thead>
    <tr>
      <th colspan='3'> First </th>
      <th colspan='2'> Second </th>
      <th> Third </th>
      <th> Fourth </th>
      <th> Fifth </th>
    </tr>
   </thead>

   <tbody>
    <colgroup>
       <col span=3> 
       <col span=2> 
       <col> 
       <col> 
       <col>
    </colgroup>

   <tr>
#First col
     <td> data </td>
     <td> data </td>
     <td> data </td> #this one

#Second col
     <td> data </td>
     <td> data </td> #this one

#Remain cols
     <td> data </td>
     <td> data </td>
     <td> data </td>
   </tr>
   </tobdy>
</table>

我希望每个

col

具有相同的背景，但我也希望每个列的最后一个元素的背景不同。因此，每个列的最后一个元素应该有绿色背景。

尝试提出一个有效的选择器来设置所需列的样式

Answer 1

如果我正确理解你的问题，你正在寻找的选择器是

td:nth-child(3), td:nth-child(5)

- 请参阅下面的代码片段。如果没有，请提供您正在寻找的内容的更好描述。

th,
td {
  border: 1px solid #ddd;
  background: #ddd;
}

td:nth-child(3),
td:nth-child(5) {
  background: #fc9;
}

<table>
  <thead>
    <tr>
      <th colspan='3'> First </th>
      <th colspan='2'> Second </th>
      <th> Third </th>
      <th> Fourth </th>
      <th> Fifth </th>
    </tr>
  </thead>

  <tbody>
    <colgroup>
      <col span=3>
      <col span=2>
      <col>
      <col>
      <col>
    </colgroup>

    <tr>
      <td> data </td>
      <td> data </td>
      <td> data #this one</td>

      <td> data </td>
      <td> data #this one</td>

      <td> data </td>
      <td> data </td>
      <td> data </td>
    </tr>
  </tbody>
</table>