如何编写CSS选择器选中指定ID表格及其所有子元素？

场景说明 #

现有两个表格，第二个表格的ID为mytab，HTML结构如下：

<table>
  <tr>
    <td>abc</td>
  </tr>
</table>

<table id="mytab">
  <tr>
    <td>xyz</td>
  </tr>
</table>

需要编写CSS选择器，仅选中第二个表格及其所有子元素（包括th、tr、td），但以下两种写法均不符合预期：

1. 选中所有表格及相关元素：
   该选择器会作用于页面中所有表格、th、tr、td，无法仅针对目标表格：

   table, th, tr, td
   {
       border: 1px solid black;
       border-collapse: collapse;
   }
   

2. 仅选中目标表格本身：
   子元素未设置ID，因此该选择器只能匹配到table#mytab，无法选中其内部的th、tr、td：

   table#mytab, th#mytab, tr#mytab, td#mytab
   {
       border: 1px solid black;
       border-collapse: collapse;
   }
   

正确写法 #

使用后代选择器，以table#mytab为父级，匹配其下所有指定后代元素：

table#mytab,
table#mytab th,
table#mytab tr,
table#mytab td
{
    border: 1px solid black;
    border-collapse: collapse;
}

如果需要更简洁的写法（适合统一设置所有子元素样式的场景），可以用通配符匹配父级下所有子元素：

table#mytab,
table#mytab *
{
    border: 1px solid black;
    border-collapse: collapse;
}

说明 #

• 后代选择器通过空格分隔父级与子元素，表示匹配父级元素下的所有指定后代元素。
• 第一种写法明确指定了需要设置样式的元素类型，匹配更精准；第二种通配符写法会覆盖父级下所有子元素，适合需要统一样式的场景。

内容的提问来源于stack exchange，提问作者chris01