From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/_colon_not/index.html | 111 ++++++++++++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 files/zh-cn/web/css/_colon_not/index.html (limited to 'files/zh-cn/web/css/_colon_not') diff --git a/files/zh-cn/web/css/_colon_not/index.html b/files/zh-cn/web/css/_colon_not/index.html new file mode 100644 index 0000000000..e22026a5af --- /dev/null +++ b/files/zh-cn/web/css/_colon_not/index.html @@ -0,0 +1,111 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - Web + - 伪类 + - 参考 +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

+ +
/* 选择所有不是段落（p）的元素 */
+:not(p) {
+  color: blue;
+}
+ +
+

注意：

+ + +
+ +

语法

+ +

:not() 伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择符或 伪元素。

+ +
+

以逗号分隔的选择器列表作为参数是实验性的，尚未获得广泛支持。

+
+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p>我是一个段落。</p>
+<p class="fancy">我好看极了！</p>
+<div>我「不是」一个段落。</div>
+
+ +

CSS

+ +
.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* 类名不是 `.fancy` 的 <p> 元素 */
+p:not(.fancy) {
+  color: green;
+}
+
+/* 非 <p> 元素 */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* 既不是 <div> 也不是 <span> 的元素 */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* 类名不是 `.crazy` 或 `.fancy` 的元素 */
+/* 注意，此语法尚未获广泛支持。 */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}
+ +

结果

+ +

{{EmbedLiveSample('Examples')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}拓展标准，以允许使用一些复杂的选择器。
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}初始定义。
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.not")}}

-- cgit v1.2.3-54-g00ecf