CSS :not() 伪类-之路教程

重要说明

:not 选择器不适用于添加到进行伪选择的不同元素的伪选择器。
无用的选择器可以用 :not 选择器编写。
:not 选择器可以增加规则的特殊性。
The:not(.foo) 匹配任何不是 .foo 的东西，（包括 <html> 和 <body>）。
:not 选择器只适用于一个元素。
如果我们使用 :not() 而不将其应用于一个元素，它将选择文档中未在参数中表示的所有元素。

语法

:not() {
  css declarations;
}

:not() 伪类示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        color: #666;
      }
      :not(p) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <p>生活终归还得继续。</p>
    <p>生活终归还得继续。</p>
    <div>生活终归还得继续。</div>
    <a href="https://www.onitroad.com" target="_blank">Link to onitroad</a>
  </body>
</html>

在以下示例中，有一个无序列表，其中 <li> 标记上有一个类。

带有 <li> 标签的 :not() 伪类示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .text-blue {
        color: blue;
      }
      ul li:not(.text-blue) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <ul>
      <li>List item 1</li>
      <li class="text-blue">List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

CSS :not() 伪类

:not() 伪类表示与选择器列表不匹配的元素。

它也被称为否定伪类。
它是一个函数伪类选择器，它将一个简单的选择器作为参数，并匹配一个或者多个未由该参数表示的元素。

:not() 选择器将以下任何一项作为参数：

类型选择器（例如 p、span 等）
类选择器（例如 .element 等）
ID 选择器（例如#header）
伪类选择器（例如：last-child、：first-of-type）
属性选择器（例如 [type="text"]）
通用选择器 (*)

日期：2020-06-02 22:14:39 来源：oir作者：oir

←CSS mix-blend-mode 属性

CSS :nth-child() 伪类→

重要说明

语法

:not() 伪类示例：

带有 <li> 标签的 :not() 伪类示例：

目录