4

我查看了其他问答，但没有找到这个特定的例子。（如果我错过了请指出它）

我无法控制如下所示的 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。但这不应该影响 display:block 上的样式。

4

3 回答 3

1

仅靠 CSS 是不可能的

如果您只处理一个 open element，那么它可以工作：此代码的演示：

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

但是如果有多个.open元素，或者即使只有一个元素也不会覆盖代码，问题是.child代码中仍然会有其他元素，但不会显示。但是，不显示它们与选择无关（请参阅 Adrift 对隐藏孩子的回答和我对多个孩子的回答失败）。仍然用于选择的未显示元素的这种用法是.child您在多行（和许多隐藏的子项）的实际情况中看到的“取代”行为；它与 javascript 覆盖无关（正如您的评论表明您怀疑的那样），它只是 CSS 相邻选择器和通用兄弟选择器的工作方式。

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

$('.open').each(function(index) {             
    $(this).nextAll('.group:not(.open)').first().css('background', '#ff0') 
});
于 2013-07-30T16:44:32.687 回答
1

你可以试试这个：

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

小提琴

于 2013-07-30T15:24:05.977 回答
1

您还可以使用：

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

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

于 2013-07-30T15:25:20.347 回答