Question

我正试图在CSS中完成一些事情。

<body>
    <div class="box">
        <div>Text</div>
        <div>Text</div>
        <div>Text</div>
    </div>
    <div class="box">
        <div>Text</div>
        <div class="selected">Text</div>
        <div>Text</div>
    </div>
    <div class="box">
        <div>Text</div>
        <div>Text</div>
        <div>Text</div>
    </div>
</body>

小提琴：http://jsfiddle.net/c4bmuxze/4/

我想让所有DIV跟随“选中”绿色。你是如何做到这一点的？你如何回到父选择器（例如“.box”），选择以下所有兄弟姐妹（通过“〜”），然后往下走以从中选择DIV？

如果所有的DIV都是直接的兄弟姐妹，这根本就没有问题，只是这一步在父母之间跳跃，这对我来说很难。

我希望有一些CSS专家或有人向我指出这些显而易见的内容。

Answer 1

CSS无法实现，但您可以借助jQuery来选择父级。

$('.selected').parent().addClass('contains-selected');

.selected {
  color: red;
}
.limegreen {
  color: limegreen;
}
.selected ~ div {
  color: limegreen;
}
.contains-selected.box ~ div {
  color: limegreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="box">
    <div>Text</div>
    <div>Text</div>
    <div>Text</div>
  </div>
  <div class="box">
    <div>Text</div>
    <div class="selected">Text</div>
    <div>Text</div>
  </div>
  <div class="box">
    <div>Text</div>
    <div>Text</div>
    <div>Text</div>
  </div>
  <div class="box">
    <div>Added Text</div>
    <div>Added Text</div>
    <div>Added Text</div>
  </div>
</body>

从父选择器中选择兄弟姐妹

1 个答案: