0

我想从 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>

我在这里尝试了大多数选择器形式，但它们似乎不起作用。我怎样才能达到我想要的？我还想#cell使用 Javascript 或 Jquery 选择元素。$('.first #cell')也不工作。$('.first').find('#cell')也失败了。

4

1 回答 1

0

首先，id 在一个页面上只能使用一次。这就是 ids 的概念：独一无二。所以“找到#cell的第一次出现”的想法很奇怪。

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

#cell1
#cell2
#cell3
…

在 jQuery 中也是一样的：

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

但是如果你想选择一个没有 id（或类）的单元格，事情可能会变得有点复杂。也许您可以尝试第 n 个子选择器。https://www.w3schools.com/cssref/sel_nth-child.asp

于 2020-02-19T07:56:06.193 回答