样式<TD>排在后面的行/某些类

Question

我需要为

的每一行的第一个TD设置样式

• 后面是一个类"header"，
• 没有colspan集

我不认为我是有可能做只是CSS，所以我认为我需要使用jQuery?

<tr>
    <td colspan="2" class="header">abc</td>
</tr>
<tr>
    <td>sasdas</td>
    <td>21234r</td>
</tr>

…类似的吗?

$(".header").next("tr>td").css("width","20%");

Answer 1

由于class header在<td>上，您需要获得其父<tr>。然后得到下一个<tr>，找到第一个<td>。看起来真的有点丑您可以使用<th>为您的列标题和样式，从表格单元格分开。

试试这个:

$(".header").closest('tr').next("tr").find('td:first').not('[colspan]').css("width","20%");

Answer 2

:not()是有效的CSS3, :has()是只有jQuery/Sizzle，其余的是CSS2。

$('tr:has(.header) + tr td:first-child:not([colspan])')

Answer 3

我建议您使用TH作为标题行。更干净，语义上更有效，而且它使您不必使用jQuery来处理所有这些。

HTML:

<tr>
    <th colspan="2">abc</th>
</tr>
<tr>
    <td>sasdas</td>
    <td>21234r</td>
</tr>

CSS:

td:first-child {
width: 20%; }

关于仅样式的行下面的标题:它看起来像你只是试图强迫一列是20%的宽度?因此，在每个第一列都使用CSS是没有害处的。对第一子节点的支持在今天的浏览器领域是相当稳固的(IE8需要声明DOCTYPE，但它会工作的)。