css :not的多个条件的写法详解

CSS :not的多个条件的写法详解

CSS中的:not伪类可以选取除了指定选择器之外的所有元素，但是它也可以用于多个条件的选择中。

基本语法

:not伪类的基本语法如下：

:not(selector)

其中，selector为要排除的元素选择器，可以是类名、ID名、标签名等。

多个条件的写法

:not可以配合其他选择器一起使用，来实现对多个条件的排除。以下是一些常用的场景：

排除多个类名

/* 排除同时包含class1和class2的元素 */
:not(.class1.class2) {
  /* 样式 */
}

排除多个标签

/* 排除p和h1标签 */
:not(p, h1) {
  /* 样式 */
}

综合应用

/* 排除同时包含class1和class2的p和h1元素 */
:not(p.class1.class2, h1.class1.class2) {
  /* 样式 */
}

示例说明

1. 不含有多个指定的类名的元素

假设我们有以下HTML结构：

<div>
  <h1 class="title">Title 1</h1>
  <p class="content">Content 1</p>
  <img src="image.jpg">
</div>

现在我们想要选取不含有类名为title和content的元素。使用如下CSS：

:not(.title, .content) {
  /* 样式 */
}

这样，div元素中的img元素就会被选取。需要注意的是，在:not内使用多个条件时，是并列条件，相当于AND条件，而非嵌套条件，不支持使用OR条件。

1. 排除某个标签元素

假设我们有以下HTML结构：

<div>
  <p>This is a paragraph</p>
  <a href="#">This is a link</a>
</div>

现在我们希望为其中不是a标签的元素设置样式。使用如下CSS：

:not(a) {
  /* 样式 */
}

这样，div元素中的p元素就会被选取。需要注意的是，如果选择器中包含了多个标签名（如:not(p, a)），则相当于使用了OR条件。

总结

以上就是:not伪类的多个条件写法，它可以帮助我们更精确地选择元素。需要注意的是，:not伪类只能选择一个元素，不支持选择多个元素。