这个JS可以用纯CSS写吗？

Question

jQuery('.parent:visible').each(function () {
  if (jQuery(this).find('.child-1').is(':hidden')) {
    jQuery(this).find('.child-2').css('color', '#000')
  }
});

单独选择孩子很容易，但由于 CSS 中没有 if 语句，我希望我缺少一些神奇的 CSS。

编辑：根据建议修复 js

Answer 1

如果您可以根据元素的可见性向元素添加类，那么您可以这样做。

.parent.visible .child-1.not-visible + .child-2 {
    color: #000
}

这将检查.parent.visible 中的.child-1 是否具有.not-visible 类——如果有，则具有.child-2 类的adjacent sibling 将继承此规则。

否则，您必须使用 JavaScript，因为 CSS 无法测试元素是否可见。

Answer 2

.parent:not(.hidden) .child-1:not(.hidden) + .child-2 或许？

---

Demo

.parent { border:1px solid red; }
.hidden { display:none; }

.parent:not(.hidden) .child-1:not(.hidden) + .child-2 {
    color:green;
}

<div class="parent">
    <div class="child-1">one</div>
    <div class="child-2">two</div>
</div>

<div class="parent">
    <div class="child-1 hidden">one</div>
    <div class="child-2">two</div>
</div>

<div class="parent hidden">
    <div class="child-1">one</div>
    <div class="child-2">two</div>
</div>

<div class="parent">
    <div class="child-1">one</div>
    <div class="child-2">two</div>
</div>