CSS 是否有一个选择器来排除 display: none 元素

在本文中，我们将介绍CSS中是否有一个选择器来排除 display: none 元素的问题。

CSS是一种用于描述网页上元素样式和布局的语言。通过使用CSS选择器，我们可以选择网页中的特定元素并对其应用样式。

在CSS中，元素可以使用 display 属性来控制其在文档中的显示方式。其中，display: none 可以将元素隐藏起来，使其在页面上不可见，也不占据空间。然而，在某些情况下，我们希望排除 display: none 的元素，以便对其他元素进行样式设置或布局操作。

阅读更多：CSS 教程

:not() 选择器

在CSS3中，提供了一个 :not() 选择器，它可以用来排除指定的元素。该选择器使用简单的选择器作为参数，表示不匹配该选择器的元素。

例如，我们可以使用 :not() 选择器来排除 display: none 的元素。下面是一个示例：

div:not([style*="display:none"]) {
  color: red;
}

上述代码中，我们使用 :not() 选择器选择所有不包含 display:none 样式的 div 元素，并将其文字颜色设置为红色。

为了更好地理解 :not() 选择器的使用方式和效果，我们接下来通过一些示例来说明。

假设我们有一个 HTML 页面，其中包含多个 div 元素，其中部分元素使用了 display: none 样式来隐藏。我们希望选择那些未隐藏的 div 元素，并对其应用样式。

<div>元素1</div>
<div style="display: none;">元素2</div>
<div>元素3</div>
<div style="display: none;">元素4</div>

为了实现这一目标，我们可以使用 :not() 选择器来排除那些具有 display: none 样式的元素。下面是相应的 CSS 代码：

div:not([style*="display:none"]) {
  background-color: lightblue;
  color: white;
}

上述代码将选择所有没有 display: none 样式的 div 元素，并将其背景色设置为浅蓝色，文字颜色设置为白色。在上述示例中，只有元素1和元素3会被选择并应用样式，元素2和元素4将被排除。

除了排除使用 display: none 样式的元素之外，我们还可以使用 :not() 选择器排除 display: none 的子元素。下面是一个示例：

<div>
  <span>文字1</span>
  <span style="display: none;">文字2</span>
  <span>文字3</span>
  <span style="display: none;">文字4</span>
</div>

为了选择那些没有隐藏子元素的 div 元素，并对其子元素应用样式，我们可以使用如下的 CSS 代码：

div:not(:has([style*="display:none"])) {
  border: 1px solid black;
}

上述代码将选择那些没有包含使用 display: none 样式的子元素的 div 元素，并为这些 div 元素设置一个黑色的边框。在上述示例中，只有第一个 div 会被选择并应用样式，其他的 div 元素将被排除。

通过使用 :not() 选择器，我们可以在CSS中排除那些使用 display: none 样式的元素或子元素。这个选择器可以帮助我们更灵活地选择并处理网页中的元素样式和布局。同时，我们还可以结合其他CSS选择器使用 :not() 选择器，以满足更精细的选择需求。