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: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>

Answer 2

如果您可以根据元素的可见性向元素添加类，那么您可以执行此操作。

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

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

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

这个JS可以用纯CSS编写吗？

2 个答案: