jQuery 中的 :hidden 和 :not(:visible) 是两个常用的选择器，它们用于筛选页面上隐藏或不可见的元素。尽管它们的功能看似相似，但实际上它们之间存在一些重要的区别。本文将详细介绍这两个选择器的区别，并提供相应的案例代码进行说明。
首先，让我们来了解一下 :hidden 选择器。它可以选择所有在页面上被隐藏的元素，无论是通过 CSS 的 display 属性设置为 none，还是通过 visibility 属性设置为 hidden。这意味着即使一个元素通过设置 opacity 为 0 而不可见，它仍然被认为是可见的，不会被 :hidden 选择器选中。接下来，我们来看一下 :not(:visible) 选择器。它可以选择所有在页面上不可见的元素，包括那些通过 CSS 的 display 属性设置为 none，visibility 属性设置为 hidden，或者通过设置 opacity 为 0 而不可见的元素。与 :hidden 选择器不同的是，:not(:visible) 选择器可以选中那些被设置为 opacity: 0 的元素，因为它们在页面上是不可见的。下面，我们通过一个案例代码来进一步说明这两个选择器之间的区别。假设我们有一个包含两个 div 元素的网页，其中一个元素被设置为 display: none，另一个元素通过设置 opacity: 0 而不可见。我们来看看如何使用 :hidden 和 :not(:visible) 选择器来选中这两个元素。html在上面的代码中，我们使用 :hidden 选择器选中了被设置为 display: none 的隐藏元素，并将它们的背景颜色设置为红色。同时，使用 :not(:visible) 选择器选中了被设置为 opacity: 0 的不可见元素，并将它们的背景颜色设置为蓝色。：通过上述案例代码和解释，我们可以得出以下：- :hidden 选择器用于选中页面上被隐藏的元素，不包括通过设置 opacity 为 0 而不可见的元素。- :not(:visible) 选择器用于选中页面上不可见的元素，包括那些被设置为 opacity: 0 的元素。- 在使用这两个选择器时，需要根据具体需求选择合适的选择器来筛选元素。参考代码：隐藏元素不可见元素
html通过本文的介绍，我们希望读者能够清楚地理解 :hidden 和 :not(:visible) 选择器之间的区别，并能够灵活运用它们来选择页面上隐藏或不可见的元素。隐藏元素不可见元素