css中的:not()是什么

发布时间:2022-03-05 11:25:10 作者:小新
来源:亿速云 阅读:704

这篇文章主要介绍css中的: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){}

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

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

  li:not(.new){

  /*所有样式列表项,除了具有新类的项之外*/

  }

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

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

  article:not(#featured):not(.tutorial){

  /*格式化文章*/

  }

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

  li:not(.old)::after{

  content:“New!”;

  color:deepPink;

  }

  说明:

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

以上是“css中的:not()是什么”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 基于CSS3+jQuery动态时钟制作的示例分析
  2. 怎么让styleneat重新格式化CSS

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:translate()与rotate()方法怎么用

下一篇:css中的:last-child与:nth-last-child()是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》