本文介绍一下Css伪类:is和:not,并解释一下is、not、matches、any之前的关系

:not

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

以上是MDN对not的解释

单从名字上我们应该能对它有大概的认知,非选择,排除括号内的其它元素

最简单的例子,用CSS将div内,在不改变html的前提下,除了P标签,其它的字体颜色变成蓝色,

<div>
<span>我是蓝色</span>
<p>我是黑色</p>
<h1>我是蓝色</h2>
<h2>我是蓝色</h2>
<h3>我是蓝色</h3>
<h4>我是蓝色</h4>
<h5>我是蓝色</h5>
</div>

之前的做法

div span,div h2,div h3, div h4,{
color: blue;
}

not写法

div:not(p){
color: blue;
}

从上面的例子可以明显体会到not伪类选择器的作用

下面升级一下,问:将div内除了span和p,其它字体颜色变蓝色

div:not(p):not(span){
color: blue;
}

还有更为简洁的方法,如下,但是目前兼容不太好,不建议使用

div:not(p,span){
color: blue;
}

兼容

除IE8,目前所有主流浏览器都支持,可以放心使用

:is

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

以上是MDN的解释

在说is前,需要先了解一下matches

matches跟is是什么关系?

matches是is的前世,但是本质上确实一个东西,用法完全一样

matches这个单词意思跟它的作用非常匹配,但是它跟not作用恰好相反,作为not的对立面,matches这个次看起来确实格格不入,而且单词不够简洁,所以它被改名了,这里还有一个issue https://github.com/w3c/csswg-drafts/issues/3258,也就是它改名的源头

好了,现在知道matches和is其实是一个东西,那么is的用法是怎样的呢?

举例:将header和main下的p标签,在鼠标hover时文字变蓝色

<header>
<ul>
<li><p>鼠标放上去变蓝色</p></li>
<li><p>鼠标放上去变蓝色</p></li>
</ul>
<p>正常字体</p>
</header> <main>
<ul>
<li><p>鼠标放上去变蓝色</p></li>
<li><p>鼠标放上去变蓝色</p></li>
<p>正常字体</p>
</ul>
</main> <footer>
<ul>
<li><p>正常字体</p></li>
<li><p>正常字体</p></li>
</ul>
</footer>

之前的做法

header ul p:hover,main ul p:hover{
color: blue;
}

is写法

:is(header, main) ul p:hover{
color: blue;
}

从上面的例子大概能看出is的左右,但是并没有完全体现出is的强大之处,但是当选择的内容变多之后,特别是那种层级较多的,会发现is的写法有多简洁,拿MDN的一个例子看下

之前的写法

/* Level 0 */
h1 {
font-size: 30px;
}
/* Level 1 */
section h1, article h1, aside h1, nav h1 {
font-size: 25px;
}
/* Level 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
font-size: 20px;
}

is写法

/* Level 0 */
h1 {
font-size: 30px;
}
/* Level 1 */
:is(section, article, aside, nav) h1 {
font-size: 25px;
}
/* Level 2 */
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
font-size: 20px;
}

可以看出,随着嵌套层级的增加,is的优势越来越明显


说完了is,那就必须认识一下any,前面说到is是matches的替代者,

any跟is又是什么关系呢?

是的,is也是any的替代品,它解决了any的一些弊端,比如浏览器前缀、选择性能等

any作用跟is完全一样,唯一不同的是它需要加浏览器前缀,用法如下

:-moz-any(.b, .c) {

}
:-webkit-any(.b, .c) { }

结论

通过上面的介绍大概讲述了css伪类is,not,matches,any它们三者的关系

is+not组合是大势所趋

最后附上我的个人网站 https://www.mofazhuan.com/ ,转载请著名出处

彻底搞懂CSS伪类选择器:is、not的更多相关文章

  1. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  2. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  3. CSS伪类选择器 - nth-child(an+b):

    CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...

  4. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  5. css伪类选择器的查找顺序

    当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...

  6. CSS伪类选择器实现三角形

    使用css实现常用的三角效果 项目中三角: .breadcrumb{ height: 40px; line-height: 40px; padding: 0 20px; border-top: 1px ...

  7. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  8. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  9. css伪类选择器详细解析及案例使用-----伪类选择器(1)

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

随机推荐

  1. Git & Github 使用教程【1】入门篇

    Github教程 1-1 版本管理工具简介 主要作用:备份文件.记录历史.回到过去.多端共享.独挡一面.团队协作 2-1 版本管理工具发展历史 3-1 Git下载和安装[略] 3-2 linux下安装 ...

  2. Java NIO之Java中的IO分类

    前言 前面两篇文章(Java NIO之理解I/O模型(一).Java NIO之理解I/O模型(二))介绍了,IO的机制,以及几种IO模型的内容,还有涉及到的设计模式.这次要写一些更贴近实际一些的内容了 ...

  3. 9i oracle数据库迁移到11G(exp)

    这个是之前生产上打算迁移的文档,后面离职了没有在停机迁移,但是测试过几次没有问题,其中需要把9I的110,120库迁移到11g一个数据库中,但是110,120库之间有相同的表名字,以及有DBLINK. ...

  4. Spring Boot 开发微信公众号后台

    Hello 各位小伙伴,松哥今天要和大家聊一个有意思的话题,就是使用 Spring Boot 开发微信公众号后台. 很多小伙伴可能注意到松哥的个人网站(http://www.javaboy.org)前 ...

  5. 轻量级CNN模型mobilenet v1

    mobilenet v1 论文解读 论文地址:https://arxiv.org/abs/1704.04861 核心思想就是通过depthwise conv替代普通conv. 有关depthwise ...

  6. 6G仅仅是比5G多1G吗??

    第六代移动通信系统(6th generation mobile networks,或6th generation wireless systems),简称6G,是指第六代移动通信技术,是5G系统后的延 ...

  7. 模块基础 day15

    目录 模块的四种形式 内置模块 pip安装的模块 自定义模块 包(模块) import和from···import 循环导入 模块的搜索路径 python文件的两种用途 模块的四种形式 模块就是一系列 ...

  8. 我发现了Unity3D的2D Light Renderer, 随后就把它抄了过来

    . 前几个月,偶然在群里看到有人讨论Unity3D光照,于是我又萌生了一个新的目标----把它抄过来! . 众所周知,3D渲染的整个流水线都跟光照密不可分,相关的技术更是数不甚数,而2D游戏的光照通常 ...

  9. 使用“反向传播”迭代法求解y=√10

    X=√10,求X,也就是求Y=10 =X2 , X是多少. *重要的思想是,如何转化为可迭代求解的算法问题. *解数学问题,第一时间画图,求导,“直线化”. Y = X2 假如已知Y = 10 ,要求 ...

  10. Appium的加载过程

    appium运行流程 Appium的加载过程如上图. 1)调用Android adb完成基本的系统操作: 2)向Android上部署bootstrap.jar: 3)Bootstrap.jar For ...