Question

我查看了其他Q＆amp; As，但没有找到这个特殊的例子。（如果我错过了，请指出它）

我无法控制HTML，如下所示：

<table>
<tbody>
<tr class="group open"><td>stuff</td></tr>
  <tr class="child"><td>stuff</td></tr>
  <tr class="child"><td>stuff</td></tr>
  ditto
<tr class="group"><td>stuff</td></tr> //Style this one only
<tr class="group"><td>stuff</td></tr>
//etc.
</tbody>
</table>

（是的，这里的“.child”名称并不准确;不是我的代码。）

是否可以设置第一个不是tr.child的下一个tr.group兄弟？在tr.open之后可以有任意数量的tr.child元素。

我试过这个没有成功：

div.mystuff table tr.group.open + tr:not(.child)

我唯一可以添加的是tr.child元素设置为display：none on load。但这不应该影响显示的样式：阻止。

Answer 1

你可以试试这个：

div.mystuff table tr.child + tr.group { /* your styles */ }

fiddle

Answer 2

你也可以使用：

div.mystuff table tr.group.open ~ tr.child + tr.group {
   color: sky;
}

http://jsfiddle.net/emtZC/4/

Answer 3

单独使用CSS不可能

如果您只处理一个开放元素 ，那么它可以工作：see this fiddle for a demo此代码：

.mystuff table .open ~ .group { /* select all */
    background: #ffff00;    
}
.mystuff table .open ~ .group ~ .group { /* revert all but first */
    background: #aaaaaa;    
}

但是使用多个.open元素，或者即使只有一个元素也没有覆盖代码，问题是代码中仍然会有其他.child元素，但未显示。但是，它们未被显示的与选择无关（see Adrift's answer with hidden children和my answer failing with multiple children）。正是这种未显示的.child元素的用法仍然用于选择你在许多行（以及许多隐藏的孩子）的实际情况中看到的“取代”行为;它与javascript覆盖无关（正如你的评论表明你怀疑），它只是CSS相邻和一般兄弟选择器的工作方式。

我相信您唯一的解决方案是通过javascript，here is a jquery solution（更改背景颜色）：

$('.open').each(function(index) {             
    $(this).nextAll('.group:not(.open)').first().css('background', '#ff0') 
});

选择第一个，下一个兄弟：not（）匹配一个类

3 个答案:

单独使用CSS不可能