"multi level" 相邻兄弟选择器

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>
....

我需要用每个块的 class "field_value" 来定位第一个或最后一个 trs。我不能使用 :nth-child，因为行数是动态的。我不能使用 :last-child 和 :first-child，因为它们不是 table 中的第一个或最后一个孩子。所以我唯一的机会是相邻的兄弟姐妹select或者使用JS。

我想 select 直接跟在包含 td.header 的行之后的每一行：

tr td.header + tr{
  ..
}

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

编辑：

想出了一个方法来做到这一点（对于这个特定的例子）：

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

--> 我定位到没有 field_value class.

的行之后的每一行

fiddle

Answer 1

很难理解你在问什么，我想你是在问 select table 中最后一个 tr 元素，它有 class 。field_value如果是这样，这将起作用：

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

在 CSS 中不可能选择包含 header 的行的下一个 child，您必须使用 javascript 来标记 parent .header 然后 select 那个标签。使用 jquery:

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

要在 header 之前标记最后一个，您可以使用 jquery:

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

Answer 2

我实际上通过发布问题想出了一个方法来做到这一点：

我可以定位跟随没有 class "field_value"

的 tr 的每个 tr

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

这是其中的一个 fiddle（可能会让我更清楚我在寻找什么）：

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

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

"multi level" 相邻兄弟选择器

"multi level" adjacent sibling selector

css

css-selectors