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的直接子项，而不是tbody内的那个。

如果我将CSS用作table>tbody，那么它会选择2，但我正在寻找一种方法来解决它。我知道table>tbody会起作用，我正在寻找是否有更多。在我的情况下，我不能使用{{1}}。

Answer 1

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

DEMO

td:first-of-type也可以。

---

:nth-of-type(1)和:first-of-type是相同的。 Docs

Answer 2

尝试使用immediate child selector >：

.myclass > tbody

或者，如果你只想在div内找到第一个，你可以这样做：

#myelement:first-child tbody

Answer 3

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

.myClass > tbody

确保指定表的类，以便不在DOM中进一步选择表

Answer 4

下面的这个选择器将选择表格tbody中的第一个myclass，而不是后代tr内的table.myclass > tbody 。

{{1}}