html - CSS选择器找到第一个tbody

Question

我的 HTML 代码

<div id="myelement">
    <table class="myclass">
       <tbody>
           <tr>
               <td>something</td>
               <td>
                   <table>
                       <tbody>
                         <tr> hari </tr>
                       </tbody>
                   </table>
               </td>
           </tr>
           <tr>
              foo
           </tr>
       </tbody>
    </table>
</div>

Xpath 解决方案

"//tbody[1]"

问题

我正在寻找一个 CSS 表达式，它应该首先选择tbody它，它是 的直接子代table，而不是里面的那个tr。

如果我使用 CSS as tbody，那么它会选择 2，但我正在寻找一种方法来修复它。我知道table>tbody会起作用，我正在寻找是否还有更多。就我而言，我不能使用table>tbody.

Answer 1

 tbody tr td:first-of-type {
     color: red;
 }

演示

td:first-of-type也可以。

---

:nth-of-type(1)并且:first-of-type是相同的。文档

Answer 2

尝试使用直接子选择器 >：

.myclass > tbody

或者，如果您只想要其中的第一个div，您可以执行以下操作：

#myelement:first-child tbody

Answer 3

使用直接子选择器 >。它只会选择作为另一个元素的直接后代的元素

.myClass > tbody

确保指定表格的类，这样您就不会在 DOM 中进一步选择表格

Answer 4

下面的这个选择器将选择tbody表中的第一个类myclass，而不是后代中的那个tr。

table.myclass > tbody