CSS选择第一个非th的包含tr

Question

说我有这样一张桌子：

（红色行是<th>＆＃39; s）

在CSS中，我想选择不是标题行的第一行。

.tableClass td:first-child {}

选择td 3:1和td 4:1。

但是当我尝试时：

.tableClass td:first-child tr:first-child {}

什么都没有被选中。

我在这里缺少什么？

注意：行不包含<td>和<th>元素，每行只有一种类型。

Answer 1

我不确定你能用纯CSS做到这一点。你对HTML有什么控制权吗？如果标题行总是首先出现（如图中所示），那么将标题行放在<thead>内，而将其他行放在<tbody>内则允许您选择内部的第一个<tr> <tbody>与

.tableClass tbody tr:first-child {}

你的

.tableClass td:first-child tr:first-child {}

正在选择每个第一子单元格内的第一行，这就是为什么它没有找到任何东西。

Answer 2

通常表格结构如下

<table>
<thead><tr><th>....</th>...</tr></thead>
<tbody><tr><td>..</td>....</tr></tbody>
</table>

因此很容易找到表格的正文部分

.tableClass tbody{
//code
}

希望有所帮助

Answer 3

你试过这个：.tableClass tr:first-child td:first-child {}？通过CSS选择元素时，您应始终从上到下（因此 table - ＆gt; table row - ＆gt; table cell ）。