html - CSS 选择器只选择外部元素

Question

我有以下 html:

 <table class="classA">
   <tbody>
      <tr>
         <td>
         </td>
      </tr>
      <tr>
         <td>
            <table>
               <tbody>
                  <tr>
                     <td>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

我想做的是只格式化外表，不包括里面的表。

我当前使用的 CSS 选择器是:

table.classA, table.classA th, table.classA td {
    //beautiful css here
}

但是上面的选择器会选择classA表中的所有元素。 那么我该怎么做呢？

Answer 1

您可以使用直接子选择器 > .并将您的选择器转换为:

table.classA, table.classA > tr > th, table.classA > tr > td {
    //beautiful css here
}

这将仅针对 <tr> 内的元素谁的直接 parent 是table与 classA .

现在，可悲的是，这种“具有此父级”类型的选择器通常不利于 CSS 性能(因为它必须遍及整个 DOM 树并检查元素的父级)。我建议大量使用类。