Rumah > hujung hadapan web > tutorial css > :not()是什么?:not()的简单使用

:not()是什么?:not()的简单使用

青灯夜游
Lepaskan: 2018-11-15 15:31:19
asal
13025 orang telah melayarinya

本篇文章给大家介绍:not()是什么?:not()的简单使用,让大家了解:not()是如何使用的。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

:not()是CSS的一个否定伪类选择器。它是一个函数式伪类选择器,它可以将一个简单选择器(如下所示)作为参数,然后匹配一个或多个不由参数表示的元素。

能作为:not()参数的可以是以下任何一种的简单选择器:

1、标签选择器(例如p,span等)

2、类选择(例如.element,.sidebar等)

3、ID选择器(例如#header)

4、伪类选择器(例如:first-child,:last-of-type)

5、属性选择器(例如[type="checkbox"])

6、通用选择器(*)

但是,传递给:not()的参数不能是伪元素选择器(例如::before和::after等)或另一个否定伪类选择器。

因此,以下是无效 :not()值:

/* 无效 */
p:not(:not(.same)) {}

p:not(:not(:last-child)) {}

:not(::first-letter) {}

a:not(::after) {}
Salin selepas log masuk

从上面的示例可以看出,:not()不能被嵌套,例:not(:not(..))。它还不能被嵌套在:matches()伪类中,例:selector(:matches(:not(..)))。

如前所述,:not()选择器将匹配其参数中未由选择器表示的元素。所以,这条css语句::

li:not(.new) {    
  /* 所有样式列表项,除了具有新类的项之外*/
}
Salin selepas log masuk

将选择除具有.new类名称的列表项之外的所有列表项。

:not()选择是可链接更多的:not()选择。例如,以下内容将匹配article除ID之外的所有s #featured,然后将过滤掉具有类名的文章.tutorial:

article:not(#featured):not(.tutorial) {    
     /* 格式化文章 */
}
Salin selepas log masuk

:not()还可以与其他伪类和伪元素链接。例如,以下将.old使用::after伪元素添加“new!”单词以列出没有类名的项目:

li :not(.old):: after {     
   content:“New!” ;    
   color:deepPink;
}
Salin selepas log masuk

说明:

:not()伪类选择允许写入无用的选择。例如:not(*),它根本不代表任何元素将永远不会应用任何样式。

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

Atas ialah kandungan terperinci :not()是什么?:not()的简单使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan