使用 CSS nth-child 选择单个表格单元格答案

【问题标题】：Use CSS nth-child to select individual table cell使用 CSS nth-child 选择单个表格单元格
【发布时间】：2016-06-03 18:39:29
【问题描述】：

以下是正在使用的示例表。（最多可以有 'n' 行）

<table border="true">
<tbody>
  <tr>
    <td>
    First Row- First Data
    </td>
    <td>
    First Row- Second Data
    </td>
    <td>
    First Row- Third Data
    </td>
    <td>
    <a href="SomeLink2">First Row- Fourth Data</a>
    </td>
  </tr>
  <tr>
    <td>
    Second Row- First Data
    </td>
    <td>
    Second Row- Second Data
    </td>
    <td>
    <a href="SomeLink3">Second Row- Third Data</a>
    </td>
    <td>
    <a href="SomeLink4">Second Row- Fourth Data</a>
    </td>
  </tr>
  <tr>
    <td>
    Third Row- First Data
    </td>
    <td>
    Third Row- Second Data
    </td>
    <td>
    <a href="SomeLink">Third Row- Third Data</a>
    </td>
    <td>
    <a href="SomeLink4">Third Row- Fourth Data</a>
    </td>
  </tr>
</tbody>
</table>

我想使用 css 选择器为列选择表行中的第一个超链接。第一个超链接可以出现在从 1 到 n 的任何行中。在上述情况下，超链接位于第二行。以下 jQuery 脚本显示了我当前的实现。

$(document).ready(function () {
     $('table tbody tr td:nth-last-child(2) a:nth-child(1)').css('backgroundColor', 'orange');
});

这会生成以下输出：

但是，我的目标是仅更改第三列中第一个超链接的背景颜色（在上述情况下，它可能是第二行，但我需要第 n 行的通用选择器）以橙。请注意，我必须使用 css 选择器选择元素。

【问题讨论】：

如果您只想影响第一行，请使用tr:first-child。
您是否正在尝试找到一个 CSS 或 jQuery 解决方案来解决这个问题？您问题中的最后一句话不清楚。
@Quantastical 我不确定这就是 OP 的要求。听起来他们想要列的第一个超链接。如果列中的第一个超链接在第二行怎么办？使用 tr:first-child 将无法匹配。
@Sandy 使用 CSS 或 JavaScript？您会将此功能应用到样式表或 JavaScript 文件中吗？
first() 是最简洁明了的方式。使用选择器变得一团糟。

标签： jquery html css css-selectors

【解决方案1】：

只需将对.first() 的调用附加到您的jQuery 选择器：

$(document).ready(function() {
  $('table tbody tr td:nth-last-child(2) a:nth-child(1)').first().css('backgroundColor', 'orange');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="true">
  <tbody>
    <tr>
      <td>
        First Row- First Data
      </td>
      <td>
        First Row- Second Data
      </td>
      <td>
        <a href="SomeLink">First Row- Third Data</a>
      </td>
      <td>
        <a href="SomeLink2">First Row- Fourth Data</a>
      </td>
    </tr>
    <tr>
      <td>
        Second Row- First Data
      </td>
      <td>
        Second Row- Second Data
      </td>
      <td>
        <a href="SomeLink3">Second Row- Third Data</a>
      </td>
      <td>
        <a href="SomeLink4">Second Row- Fourth Data</a>
      </td>
    </tr>
    <tr>
      <td>
        Third Row- First Data
      </td>
      <td>
        Third Row- Second Data
      </td>
      <td>
        Third Row- Third Data
      </td>
      <td>
        <a href="SomeLink4">Third Row- Fourth Data</a>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

我不想使用 jQuery 辅助方法。我只是想让选择器完成这项工作。

【解决方案2】：

table tbody tr:nth-child(2) td:nth-child(3){background-color:yellow;} 表 tbody tr:nth-child() td:nth-child(3){background-color:yellow;}

【讨论】：

【解决方案3】：

这是因为您没有选择特定的行 (<tr>) 元素。如果第三行的第三个单元格也是一个链接会更明显。您需要将您的 JS 更改为：

$(document).ready(function () {
     $('table tbody tr:first-child td:nth-last-child(2) a:nth-child(1)').css('backgroundColor', 'orange');
});

使用:first-child 可以限制对表格的第一个<tr> 元素的更改。

【讨论】：

请注意，在我提交答案后，该问题已被编辑以更改要求。

【解决方案4】：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>

<script>
$(document).ready(function () {
     $('table tbody tr:nth-child(1) td:nth-child(3) a:nth-child(1)').css('backgroundColor', 'orange');
}); 
</script>

<table border="true">
<tbody>
  <tr>
    <td>
    First Row- First Data
    </td>
    <td>
    First Row- Second Data
    </td>
    <td>
    <a href="SomeLink">First Row- Third Data</a>
    </td>
    <td>
    <a href="SomeLink2">First Row- Fourth Data</a>
    </td>
  </tr>
  <tr>
    <td>
    Second Row- First Data
    </td>
    <td>
    Second Row- Second Data
    </td>
    <td>
    <a href="SomeLink3">Second Row- Third Data</a>
    </td>
    <td>
    <a href="SomeLink4">Second Row- Fourth Data</a>
    </td>
  </tr>
  <tr>
    <td>
    Third Row- First Data
    </td>
    <td>
    Third Row- Second Data
    </td>
    <td>
    Third Row- Third Data
    </td>
    <td>
    <a href="SomeLink4">Third Row- Fourth Data</a>
    </td>
  </tr>
</tbody>
</table>

仅使用nth-child。

【讨论】：

@Sandy 我的解决方案有什么问题，请告诉我。
带有超链接的行并不是真正的第一行。它可以是任何行。我希望 css 选择器找到该行。