兄弟CSS选择器没有改变[重复]答案

【问题标题】：Sibling css selector not changing [duplicate]兄弟CSS选择器没有改变[重复]
【发布时间】：2016-09-01 11:09:00
【问题描述】：

ID 2 之前的所有tr 及其下的所有 ID 都应该是相同的颜色。检查示例。但是ID 2以后就不会变了。

这是我的代码：

[id="1"], [id="1"] ~ tr {
  background-color: blue;
}
[id="2"], [id="2"] ~ tr {
  background-color: red;
}

<table>
    <tbody>
        <tr id="1"><td>foo</td></tr>  <!-- Blue -->
        <tr><td>foo</td></tr>         <!-- Blue -->
        <tr><td>foo</td></tr>         <!-- Blue -->
        <tr id="2"><td>foo</td></tr>  <!-- Red -->
        <tr><td>foo</td></tr>         <!-- Red -->
        <tr id="1"><td>foo</td></tr>  <!-- Blue (But is Red) -->
        <tr><td>foo</td></tr>         <!-- Blue (But is Red) -->
        <tr><td>foo</td></tr>         <!-- Blue (But is Red) -->
        <tr><td>foo</td></tr>         <!-- Blue (But is Red) -->
    </tbody>
</table>

【问题讨论】：

id of element in document 应该是唯一的。

标签： jquery html css css-selectors

【解决方案1】：

给定 html 在 Question 您可以使用相邻兄弟选择器 +, !important

[class="1"],
[class="1"] ~ tr {
  background-color: blue;
}

[class="2"],
[class="2"] + tr {
  background-color: red !important;
}

<table>
  <tbody>
    <tr class="1">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr class="2">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr class="1">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
  </tbody>
</table>

或者，使用 jQuery 的 .nextUntil()、.add()

$(".1").nextUntil(".2").add(".1").addClass("blue");
$(".2").nextUntil(".blue").add(".2").addClass("red");

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="1">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr class="2">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr class="1">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
  </tbody>
</table>

【讨论】：

该 html 只是示例，代码继续增加 300 行和不同的大小。所以这个解决方案不起作用
可能有一种方法只使用css 可以达到预期的效果。将尝试使用javascript 方法更新答案
谢谢，我试了一整天都没有成功，一旦解决了就放心了！
@StefanTrailovic 查看更新后的帖子
似乎工作完美，现在将在网站上试用。谢谢！

【解决方案2】：

保持简单。默认使用蓝色单元格为表格设置样式，并在需要时使用红色类覆盖。

.example-table td {
  background-color: blue;
}

.example-table .red td {
  background-color: red;
}

<table class="example-table">
  <tbody>
    <tr>
      <td>foo</td>
    </tr>
    <tr >
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr class="red">
      <td>foo</td>
    </tr>
    <tr class="red">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
  </tbody>
</table>

【讨论】：

您的代码的“问题”是在 id=1 和 id=2 之间没有任何 id 的 tr 将是蓝色的，而它应该是红色的。