简介

:not 选择器是一个 CSS3 选择器，用于匹配不满足特定条件的元素。它允许您从一组元素中排除特定的元素，从而提供更精确和灵活的样式控制。

语法

:not 选择器的语法如下：

:not(selector)

其中：

• selector 是您要排除的元素的 CSS 选择器。

用法

:not 选择器可以在任何 CSS 规则中使用，以排除特定元素。例如，以下规则将为所有段落元素设置红色文本，但排除具有 special 类的段落元素：

p {
  color: red;
}

p:not(.special) {
  color: black;
}

嵌套选择器

:not 选择器可以嵌套在其他选择器中，以创建更复杂的排除条件。例如，以下规则将为所有具有 container 类且不具有 child 类的元素设置蓝色边框：

.container:not(.child) {
  border: 1px solid blue;
}

排除多个元素

:not 选择器可以排除多个元素，只需将它们用逗号分隔即可。例如，以下规则将为所有不具有 special 类或 important 类的段落元素设置绿色文本：

p:not(.special, .important) {
  color: green;
}

示例代码

以下是一些使用 :not 选择器的示例代码：

• 排除具有 disabled 类的按钮：

button:not(.disabled) {
  background-color: #007bff;
}

• 排除具有 active 类的导航链接：

nav a:not(.active) {
  color: #6c757d;
}

• 排除具有 footer 类的元素之外的所有元素：

*:not(.footer) {
  padding: 1rem;
}

• 排除具有 special 类或 important 类的段落元素：

p:not(.special, .important) {
  font-size: 1.2rem;
}

浏览器支持

:not 选择器得到所有现代浏览器的广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。

结论

:not 选择器是 CSS3 中一个强大的工具，它允许您从元素集合中排除特定的元素。通过使用嵌套选择器和排除多个元素，您可以创建更精确和灵活的样式规则。