有没有办法先选择具有相同类名的table的子元素，然后再选择第一个td元素？

可以使用CSS选择器来选择具有相同类名的table的子元素，然后再选择第一个td元素。以下是一个示例：

假设HTML结构如下：

<table class="my-table">
  <tr>
    <td>第一个单元格</td>
    <td>第二个单元格</td>
  </tr>
  <tr>
    <td>第三个单元格</td>
    <td>第四个单元格</td>
  </tr>
</table>

<table class="my-table">
  <tr>
    <td>第五个单元格</td>
    <td>第六个单元格</td>
  </tr>
  <tr>
    <td>第七个单元格</td>
    <td>第八个单元格</td>
  </tr>
</table>

要选择每个具有类名my-table的table的第一个td元素，可以使用以下CSS选择器：

.my-table tr:first-child td:first-child {
  /* 在这里添加样式 */
}

这个选择器的含义是：

.my-table：选择所有具有类名my-table的元素。
tr:first-child：选择每个.my-table中的第一个tr子元素。
td:first-child：选择每个选中的tr中的第一个td子元素。

如果你需要在JavaScript中进行选择，可以使用以下代码：

// 获取所有具有类名my-table的table元素
const tables = document.querySelectorAll('.my-table');

// 遍历每个table元素
tables.forEach(table => {
  // 获取每个table中的第一个tr元素的第一个td元素
  const firstTd = table.querySelector('tr:first-child td:first-child');
  
  // 在这里可以对firstTd进行操作，例如添加样式或事件监听器
  console.log(firstTd);
});

这段代码首先使用querySelectorAll获取所有具有类名my-table的table元素，然后遍历每个table元素，使用querySelector选择每个table中的第一个tr元素的第一个td元素，并对其进行操作。

这种方法的优势在于它简洁且易于理解，适用于大多数现代浏览器。通过这种方式，你可以轻松地选择并操作特定的DOM元素，而不需要编写复杂的JavaScript逻辑。