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

<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 tr:first-child td:first-child {
  /* 在这里添加样式 */
}

// 获取所有具有类名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);
});