HTML表嵌套选择器

Question

我想从一个colgroup中选择一个特定的单元格，但不知道如何。下面是一个示例：

table {
  position:relative;
  top:50px;
  margin:0 auto;
  border-collapse:collapse;
}

td, th {
  border:1px solid black;
  width:75px;
  height:25px;
}

.first {
  background-color:red;
}

.second {
  background-color:yellow;
}

.third {
  background-color:green;
}

.cell {
  background-color:white;
}

.first .cell {
  text-align:left;
  border:5px solid black;
  color:red;
}

.second > .cell {
  text-align:center;
  border:5px solid black;
  color:red;
}

.third .cell {
  text-align:right;
  border:5px solid black;
  color:red;
}

<table>
  <colgroup>
    <col span=2 class='first'>
    <col span=2 class='second'>
    <col span=2 class='third'> 
  </colgroup>
  <thead>
    <th colspan=6>asdad</th>
  </thead>
  <tbody>
    <tr>
      <th>asdad</th>
      <td class='cell'>One</td>
      <th>asdad</th>
      <td>fghfghf</td>
      <th>sdadsad</th>
      <td>yututu</td>
    </tr>
        <tr>
      <th>asdad</th>
      <td>jhkjhk</td>
      <th>asdad</th>
      <td class='cell'>Two</td>
      <th>sdadsad</th>
      <td>yututu</td>
    </tr>
    <tr>
      <th>asdad</th>
      <td>jhkjhk</td>
      <th>asdad</th>
      <td>fghfghf</td>
      <th>sdadsad</th>
      <td class='cell'>Three</td>
    </tr>
  </tbody>
</table>

我已经尝试过大多数选择器的形式为here，但它们似乎不起作用。我怎样才能实现自己想要的？我也想使用Javascript或Jquery选择#cell元素。 $('.first #cell')也不起作用。 $('.first').find('#cell')也失败。

Answer 1

首先，ID必须在页面上仅使用一次。这就是id的概念：独一无二。因此“发现#cell的首次出现”的想法很奇怪。

如果您有机会为要选择的表格单元格提供ID，那么事情很简单：通过其唯一ID选择它们：

#cell1
#cell2
#cell3
…

与jQuery中的相同：

$('#cell1')
$('#cell2')
$('#cell3')
…

但是，如果您要选择没有ID（或类）的某个单元格，事情可能会变得更加复杂。也许您可以尝试使用nth-child-selector。 https://www.w3schools.com/cssref/sel_nth-child.asp