CSS邻居兄弟姐妹互相覆盖

Question

我注意到在使用~选择兄弟姐妹时，规则在样式表中出现的顺序导致它们相互覆盖。

我想要的是.test后.ColorBlue为蓝色，.test后.ColorRed为红色。{/ p>

数据将被动态拉动，因此颜色的顺序将不断变化。

此外，可以动态插入新数据，因此使用jquery的“nextUntil”将是非常不切实际的。

我做错了什么？

.ColorBlue, .ColorBlue ~ tbody.test {
    background: blue;
}
.ColorRed, .ColorRed ~ tbody.test {
    background: red;
}

<table>
    <tbody class="ColorRed">
        <tr>
            <td>red</td>
        </tr>
    </tbody>
    <tbody class="test ">
        <tr>
            <td>test</td>
        </tr>
    </tbody>
    <tbody class="ColorBlue">
        <tr>
            <td>blue</td>
        </tr>
    </tbody>
    <tbody class="test ">
        <tr>
            <td>≡</td>
        </tr>
    </tbody>
</table>

Answer 1

您可以使用+ Adjacent sibling selector来实现此目的。

~ General sibling combinator将选择与选择器匹配的所有元素，而不仅仅是第一个。它不会被后续规则覆盖，因为它不比第一条规则更具体。

.ColorBlue, .ColorBlue + tbody.test {
    background: blue;
}
.ColorRed, .ColorRed + tbody.test {
    background: red;
}

<table>
    <tbody class="ColorRed">
        <tr>
            <td>red</td>
        </tr>
    </tbody>
    <tbody class="test ">
        <tr>
            <td>test</td>
        </tr>
    </tbody>
    <tbody class="ColorBlue">
        <tr>
            <td>blue</td>
        </tr>
    </tbody>
    <tbody class="test ">
        <tr>
            <td>≡</td>
        </tr>
    </tbody>
</table>