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>。因此，样式应用于 <li>，没有 .sample 类。


<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>

打印本页