使用/某个类在第一行后面设置样式

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都没有坏处。 Support for first-child在今天的浏览器版本中非常可靠（IE8需要DOCTYPE声明，但它可以正常工作。如果需要，可以使用旧版本的polyfil。）