Question

我想弄清楚如何完成这个恼人的问题，据我所知，CSS中没有：隐藏选择器，但你可以在jQuery中使用它。我在css中唯一知道的其他选择器是：empty，但是我的元素可能并不总是为空，但仍然是隐藏的。

所以这就是我要做的事。

 <div class="wrapper">
     <div class="one"></div>
     <div class="two"></div>
 </div>

我希望能够选择“一个”或“两个”，如果它当前是隐藏的，我想对其他元素做一些事情。

像：

.wrapper .one:hidden .wrapper .two

我知道我可以用jQuery做到这一点，但是我想找出一种方法可以根据隐藏元素是否变为可见而自动调整，反之亦然。

Answer 1

我不知道css是否有隐藏的选择器，但在此期间，你可以添加一个可能隐藏的类？

.wrapper .one.hidden

Answer 2

原则上不可能在纯CSS中使用。如果CSS允许这样"the first woodpecker that came along would destroy civilization"。

考虑类似的事情：

.wrapper .one:not(:hidden) .wrapper .one { display:none; }

这创造了完美的无限循环。你的浏览器会试图解决它。

如果有趣，你可以read my article就这个问题发表。

Answer 3

您可以看到CSS选择器here的完整列表。不幸的是，没有一个适用于可见性或按当前CSS样式选择。

涉及最少代码的方式是给他们一个visible类，你可以在CSS中设置样式。然后在元素被隐藏时使用jQuery删除visible类，并在它再次可见时添加它。不是很精简，但它似乎是最好的解决方案。

Answer 4

这个jsfiddle

怎么样？

为什么不只搜索隐藏的那个并为另一个做一些事情，而不是搜索那个可见的那个？

$(document).ready(function() {

    $('.wrapper div').each(function() {
        if ($(this).is(':visible')) {
          //do something special
        }
    })

})

Answer 5

我认为你正在寻找这样的东西：

SEE DEMO

<强> jQuery的：

if($('.one').is(":hidden")) {
   $(".two").css("color","red")    
}

CSS选择隐藏的元素

5 个答案:

SEE DEMO