Html 选择与类匹配的第一个、下一个同级：not（）

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

我无法控制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>

我唯一可以添加的是tr.child元素被设置为display:none-on-load。但这不应影响display:block的样式。

您可以尝试以下方法：

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

您还可以使用：

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

单靠CSS是不可能的 如果您只处理一个打开的元素，那么它就可以工作：在以下代码中：

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

但是，如果有多个

.open

元素，或者即使只有一个元素也不重写代码，问题是代码中仍有其他

.child

元素，但未显示。但是，它们未展开与选择（和）无关。正是这种未显示的

.child

元素仍用于选择的用法，才是您在许多行（和许多隐藏的子行）的实际情况中看到的“替换”行为；它与javascript重写无关（正如您的评论所暗示的那样），它只是CSS相邻选择器和一般同级选择器的工作方式

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

---

问题是tr.childs的数量未知：/Right，应该是这样的。还是不行。我猜是有别的东西取代了这种行为。我不能；太大了。一个文件中有5000多行CSS，并且加载了多个CSS和.JS文件。我在上一个加载的文档中编辑CSS，但显然有些东西优先于此样式。奇怪的是，它将为下面的tr.child元素设置样式，而不是下一个tr.group。tr.open是否总是在那里并且总是第一个子元素？或者，如果不是第一个孩子，

tr.open

至少会是第一个

tr.group

？不管怎样，一次只能有一个

tr.open

？不幸的是，他们的代码似乎允许任意数量的tr.open。使事情变得棘手。每当有一个

tr.open

时，后面是否总是至少有一个

tr.child

？抱歉，如果我问了太多问题-CSS选择器对结构细节很挑剔，例如：）是的，所有tr.groups都至少有一个tr.child跟随，否则它们被设置为tr.atomic。这有用吗？（挑剔！你是在告诉我！）@cbmtrx:是的，它是这样做的-这样就不需要整个选择器（特别是，

div.mystuff table tr.group.open+tr.group

）。不管怎么说，既然现有的答案在应该的时候没有帮助，试着调试那些脚本，希望能用你能找到的任何东西更新你的问题。太简单了！这个应该能用，但不行。这让我觉得有一些jQuery/javascript背景阻止了它。超出我的控制范围…如果有多个

，则此操作将失败。但是打开
。我一定错过了可能有多个
。打开
（注释太多，无法通读）。是的。。。这已经被提到了，但它被我的评论掩盖了，所以我现在把它投了上去，让它进入人们的视野。它本可以直接编辑到问题中，但是，哦，好吧，好吧，这很有意思。我将留下我的解释，解释为什么其他答案（如果不止一个答案是
打开的
，那么现在我的答案）不起作用，然后给出我知道的唯一解决方案：使用某种形式的javascript。
.mystuff table .open ~ .group { /* select all */
    background: #ffff00;    
}
.mystuff table .open ~ .group ~ .group { /* revert all but first */
    background: #aaaaaa;    
}

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