html - 从父选择器中选择 sibling

标签 html css css-selectors parent siblings

<分区>

我正在尝试完全用 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>

fiddle :http://jsfiddle.net/c4bmuxze/4/

我想让“选定”的所有 DIV 都变成绿色。你如何做到这一点?您如何返回到父选择器(例如“.box”),选择所有后续兄弟(通过“~”)然后向下选择它们的 DIV?

如果所有的 DIV 都是直接 sibling ,这根本就不是问题,只是在 parent 之间跳转这一步让我很难做到这一点。

我希望有 CSS 大师或有人向我指出显而易见的事情。

最佳答案

使用 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>

关于html - 从父选择器中选择 sibling ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32967192/

上一篇:android - 如何从 Android strings.xml 中的 anchor 链接中删除格式

下一篇:javascript - 链接到带有散列片段的页面(因此用户登陆页面上的特定内容)问题

相关文章:

css - 我可以使用 CSS :visited pseudo class on 'wildcard' links?

css 子选择器不适用于线程中的元素

javascript - 使用 onchange 输出生成的链接

javascript - 将一个 div 放在父 div 的底部

css - 如何CSS边框间距(或)分别填充背景图片?

html - 是否可以使用 css 使我的柱状 div 框响应较小的设备?或者我可以使用 Bootstrap 吗?

javascript - on ('click' ) 函数在第二次点击时触发

javascript - 获取 TD 单元格宽度以指定宽度 % 环绕 div

html - Facebook 股票代码设计是如何实现的?

javascript - :active pseudo class get applied 到底是什么时候