Html CSS选择器仅选择外部元素

我有以下html：

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

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

试试这个

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

---

您可以使用直接子选择器

>

。并将选择器转换为：

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

这将只针对

中的元素，而

的直接父级是
表
中的
类

不幸的是，这种“hatshisparent”类型的选择器通常不利于CSS性能（因为它必须遍历整个DOM树并检查元素的父元素）。我建议改为大量使用类

据我所知，最多应该有两个级别

选择
表中的所有第一个孩子。classA
和第二个孩子
th
和
td
更简单的方法是用类调用所需的元素

您可以像这样转换html

<table class="tableclassA">
   <tbody>
      <tr class="trclassA">
         <td class="tdclassA">
         </td>
      </tr>
      <tr class="trclassA">
         <td class="tdclassA">
            <table>
               <tbody>
                  <tr>
                     <td>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

您可以将表格包装在div标记内，然后按照下面给出的方式进行样式设置。
HTML现在将变成

<div id="container">
<table class="classA">
   <tbody>
      <tr>
         <td>
         </td>
      </tr>
      <tr>
         <td>
            <table>
               <tbody>
                  <tr>
                     <td>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
</div>

注1:“>”仅用于选择CSS层次结构中最顶层的子级。
注2：您也可以在container div上使用class而不是ID，但主要思想是将其包含在父元素中。
据我所知，最多应该有两个级别
<table class="tableclassA">
   <tbody>
      <tr class="trclassA">
         <td class="tdclassA">
         </td>
      </tr>
      <tr class="trclassA">
         <td class="tdclassA">
            <table>
               <tbody>
                  <tr>
                     <td>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

tableclassA, trclassA, tdclassA {
    //beautiful css here
}

<div id="container">
<table class="classA">
   <tbody>
      <tr>
         <td>
         </td>
      </tr>
      <tr>
         <td>
            <table>
               <tbody>
                  <tr>
                     <td>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
</div>

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