CSS选择器找到第一个tbody

Posted 2023-03-06

【中文标题】CSS选择器找到第一个tbody

【英文标题】：CSS selector to find the first tbody

【发布时间】：2013-08-28 03:24:29

【问题描述】：

我的 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 作为tbody，那么它会选择 2，但我正在寻找一种方法来修复它。我知道table>tbody 会起作用，我正在寻找是否还有更多。就我而言，我不能使用table>tbody。

【问题讨论】：

不使用>是无法只选择第一个的

@Babai，看看我的答案没有>

怎么样 td:nth-child(1) color: red;

@Danield 我想选择tbody 第一个不是嵌套的.. :)

【参考方案1】：

尝试使用immediate child selector >：

.myclass > tbody

或者，如果您只想要div 中的第一个，您可以这样做：

#myelement:first-child tbody

【讨论】：

是否选择了第一个tbody？

让我们continue this discussion in chat

【参考方案2】：

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

.myClass > tbody

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

【参考方案3】：

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

table.myclass > tbody

【参考方案4】：

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

DEMO

td:first-of-type 也可以。

---

:nth-of-type(1) 和 :first-of-type 是一样的。 Docs