CSS选择隐藏元素答案

【问题标题】：CSS select hidden elementsCSS选择隐藏元素
【发布时间】：2012-08-17 03:56:04
【问题描述】：

我正试图弄清楚如何解决这个烦人的问题，据我所知，CSS 中没有 :hidden 选择器，但您可以在 jQuery 中使用它。我在 css 中知道的唯一其他选择器是 :empty，但是我的元素可能并不总是空的，但仍然是隐藏的。

这就是我想要做的。

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

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

喜欢：

.wrapper .one:hidden .wrapper .two

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

【问题讨论】：

隐藏时给它一个“隐藏”类。然后使用.hidden。
你可以使用visibility:hidden; ??
@Madbreaks 归根结底，我将不得不做类似的事情，但这会为我创建更多的编码来添加和删除该类，如果有一个 :hidden功能它会自动完成。如果可以的话，我只是想减少代码。
@Dylan Cross：请看下面我的回答，希望您正在寻找this

标签： jquery css selector hidden

【解决方案1】：

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

.wrapper .one.hidden

【讨论】：

可能归结为我将不得不做类似的事情，但这会为我创建更多的代码来添加和删除该类，如果有一个 :hidden 函数它与 CSS 一样会自动完成。如果可以的话，我只是想减少代码。

【解决方案2】：

原则上在纯 CSS 中是不可能的。如果 CSS 允许这样做，那么 "the first woodpecker that came along would destroy civilization".

考虑类似：

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

这会创建完美的无限循环。你的浏览器会在试图解决它时死掉。

如果有兴趣可以read my article讨论主题。

【讨论】：

是的，但是我相信他们可以添加一个可以运行的最大时间或类似的东西，它只会让这样简单的事情变得更简单。哈。
@DylanCross 这不是关于这将运行多少次，而是关于未确定的结果。 .wrapper .one 会出现在我上面的示例中吗？
我明白了。好吧，在上面的例子中，它只是关于我实际在做什么的绝对基础，“一”和“二”都可以隐藏，或者任何一个都可以隐藏，或者两者都可以看到。这将取决于不同的事情。（这就是为什么需要一点代码才能使其全部工作，并保持准确，因为页面可以随时更改（使用 ajax 推送数据等）
好的，因为纯 CSS 中没有这样的功能，所以你需要找到其他方法来做到这一点。例如愚蠢的window.setTimeout( checkIfThoseIsVisible());。这种轮询不是那么有效，但在某些情况下是唯一的选择。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这个jsfiddle怎么样

与其寻找隐藏的对另一个做点什么，不如只搜索可见的？

$(document).ready(function() {

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

})

【讨论】：

最终这似乎是我必须这样做的方向，但是唯一的问题，我的问题的主要问题是这只会在页面首次加载时这样做，我的页面完全充满了 ajax 加载的内容（实时数据推送到页面），所以当事情发生变化时它需要这样做，如果 CSS 内置了 :hidden 它就像 .one:hidden 一样简单，但是它没有'不是这样，每次更改时都需要检查大量代码：\
它将运行一次，因为它在 document.ready 函数中，但是您可以创建一个常规函数并在 ajax 调用成功时调用该函数。这样你就不会重复不必要的代码。如果您不想使用 jQuery 检查元素是否可见，我建议使用类。

【解决方案5】：

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

SEE DEMO

jQuery：

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

【讨论】：