CSS - :not()伪类

CSS 伪类函数:not()表示或匹配不匹配给定选择器列表的元素。它也称为否定伪类，因为它避免从列表中选择特定项目。

伪类:not()是一个非常棘手的伪类，会产生意想不到的结果。所以你应该注意它。

使用:not()的一些意外和不寻常的结果如下

:not()伪类用于编写无用的选择器，例如:use(*)表示它将匹配任何不是元素的元素。这没有任何意义，因此不会应用任何规则。
它可以提高规则的特异性；例如#foo.not(#bar)，将匹配与#foo一样简单的元素，但特异性增加了两个选择器ID。
从逗号分隔的选择器列表中，最具体的选择器的特异性将替换:not()伪类的特异性。
如果你传递类似:not(.foo)的内容，则伪类将匹配所有内容，包括基本的 HTML 标签，例如<html>或<body>。
如果你传递:not(table)，它将导致匹配tr、tbody、th、td、caption等，因为它们都可以匹配给定的参数 :not(table)。
一次可以否定多个选择器，例如 :not(.foo, .bar)，表示 :not(.foo) :not(.bar)
当作为列表的一部分传递的任何选择器被证明是无效或不受支持时，将导致整个规则无效。为了避免这种情况，你应该使用:is()，因为它具有宽容选择器列表的特性。

语法

:not(<complex-selector-list>) {
   /* ... */
}

伪类:not()需要一个逗号分隔的一个或多个选择器的列表作为其参数。该列表不应包含另一个:not()或伪元素。

CSS :not() 示例

这是一个:not()伪类的示例。

在这个例子中

一个类(.sample)声明了一些 CSS 样式。
:not() 伪类与 h1 元素上的 .sample 类一起使用。
:not() 伪类使用 h1 作为参数，因此 CSS 样式应用于除 h1 元素之外的所有其他元素。

<html>
<head>
<style>
   .sample {
      text-shadow: 2px 2px 3px yellow;
   }

   /* <h1> elements that are not in the class '.sample' */
   h1:not(.sample) {
      background-color: lightblue ;
   }

   /* Elements that are not <h1> elements */ 
   body :not(h1) {
      text-decoration-line: line-through;
   }

   /* Elements that are not <div> and not <span> elements */
   body :not(div):not(span) {
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>heading with :not(.sample) pseudo-class applied</h1>
   <h1 class="sample">heading with styling applied</p>
   <p>Paragraph, hence :not(h1) and :not(div):not(span) applied.</p>
   <div>div element, hence :not(h1) applied.</div>
</body>
</html>

以下是:not()的另一个示例，其中另一个伪类:nth-child用于在容器中选择交替的p元素，并应用样式。

<html>
<head>
<style>
   p:not(:nth-child(2n+1)) {
      font-size: 3em;
   }
</style>
</head>
<body>
   <h1>Heading</h1>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
   <p>Paragraph 3</p>
   <p>Paragraph 4</p>
</body>
</html>

在以下示例中，:not()应用于具有类.sample的<li>。因此，样式应用于没有.sample类的<li>。

<html>
<head>
<style>
   li:not(.sample) {
      font-size: 2.5em;
      color: red;
   }
   .sample {
      color: green;
      font-weight: 800;
      background-color: lightyellow;
   }
</style>
</head>
<body>
   <h1>Unordered List</h1>
   <ul>
      <li>list item 1</li>
      <li class="sample">list item 2</li>
      <li>list item 3</li>
    </ul>
</body>
</html>

打印页面