Question

我有以下html（按原样生成，所以我只能用JS改变它）：

<table>
<tr>
    <td class="header">
        <h3>title 1</h3>
    </td>
</tr>

<tr class="field_value">
    <td></td>
</tr>

<tr class="field_value">
    <td></td>
</tr>

<tr>
    <td class="header">
        <h3>title 2</h3>
    </td>
</tr>

<tr class="field_value">
    <td></td>
</tr>
....

我需要使用每个块的“field_value”类来定位第一个或最后一个trs。我不能使用：nth-child，因为行的nr是动态的。我不能使用：last-child和：first-child，因为他们不是表中的第一个或最后一个孩子。所以我唯一的机会就是相邻的兄弟选择器或使用JS。

我想选择直接跟在包含td.header的行的每一行：

tr td.header + tr{
  ..
}

这不起作用，可能是因为它会针对tr中跟随td.header的tr？任何想法如何解决这个问题？

修改

找到了一种方法（对于这个具体的例子）：

tr:not(.field_value) + tr.field_value{
    ..
}

- ＆GT;我将目标放在没有field_value类的行之后的每一行。

fiddle

Answer 1

很难理解你在问什么，我想你要求在表中选择最后一个具有类.field_value的tr元素，如果是这样的话：

EDITED: I didnt realize it cant do classes //tr.field_value:last-of-type

在CSS中选择包含标题的行的下一个子项是不可能的，您必须使用javascript标记.header的父级，然后选择该标签。使用jquery：

$('td.header').parent().addClass('.parent-of-header')
.next().addClass('.first-field-value');

要在标题之前标记最后一个，可以使用jquery：

执行此操作

$('td.header').parent().addClass('.parent-of-header')
.prev().addClass('.first-field-value');

Answer 2

我实际上通过发布问题想出了一种方法：

我可以定位每个tr之后的tr没有类＆＃34; field_value＆＃34;

tr:not(.vf__field_value) + tr.vf__field_value{
    ..
}

这是一个小提琴（可以让我更清楚我要找的东西）：

http://jsfiddle.net/b78unpms/1/

仍会对其他解决方案感兴趣..

“多级”相邻的兄弟选择器

2 个答案: