css中 not用法是什么

## CSS中`:not`用法 CSS中的`:not`伪类用来选择除了某个特定选择器之外的元素。它允许我们通过简单的选择器来匹配未选中的元素。本文将从基本用法、选择器组合、伪类和伪元素等方面详细介绍`:not`的用法。 ### 基本用法 `:not`伪类的基本语法如下所示： ```css :not(selector) { /* 样式规则 */ } ``` 其中`selector`是需要排除的选择器。下面是一个基本示例，将所有按钮除了第一个按钮之外都设置为红色： ```html

示例1:

将除了第一个按钮之外的所有按钮设置为红色。

按钮1
按钮2
按钮3
按钮4
按钮5

button:not(:first-of-type) {
  background-color: red;
}

``` 上述示例中，使用`:not(:first-of-type)`排除了第一个按钮，并将其余按钮的背景色设置为红色。 ### 选择器组合 `:not`伪类可以与其他选择器进行组合使用，以实现更复杂的使用场景。下面是一个示例，将所有`

`元素中不包含`.selected`类的元素背景色设置为灰色： ```html

示例2:

将不包含.selected类的

元素的背景色设置为灰色。

  
列表项1
  
列表项2
  
列表项3
  
列表项4
  
列表项5

li:not(.selected) {
  background-color: gray;
}

``` 上述示例中，使用`:not(.selected)`排除了包含`.selected`类的`

`元素，将其余元素的背景色设置为灰色。 ### 伪类和伪元素 `:not`伪类也可以与其他伪类和伪元素进行组合使用。下面是一个示例，将所有除了最后一个`

`元素之外的`

`元素设置为粗体： ```html

示例3:

将除了最后一个

元素之外的

元素设置为粗体。

段落1
段落2
段落3
段落4
段落5

p:not(:last-of-type) {
  font-weight: bold;
}

``` 上述示例中，使用`:not(:last-of-type)`排除了最后一个`

`元素，并将其余元素的字体加粗显示。 ### 总结 `:not`伪类是CSS中用来选择除了某个特定选择器之外的元素的功能强大的工具。它可以与其他选择器进行组合使用，以实现更复杂的样式选择。通过合理运用`:not`伪类，可以更高效地选择和处理页面上的元素，并实现丰富的样式效果。