本文介绍一下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. 百万年薪python之路 -- 前端CSS样式

    CSS样式 控制高度和宽度 width宽度 height高度 块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定. 示例: <!DOCTYPE ht ...

  2. selenium学习-拖拽页面元素

    一.ActionChains包 模拟鼠标的操作要首先引入ActionChains的包 from selenium.webdriver.common.action_chains import Actio ...

  3. OptimalSolution(1)--递归和动态规划(4)其他问题

    一.汉诺塔问题(包括chapter 1中的汉诺塔问题) 二. 三. 四. 五. 六. 七. 八.

  4. SpringCloud之Eureka服务注册与发现(一)

    一 Eureka的基本架构 Spring Cloud 封装了 Netflix 公司开发的 Eureka 模块来实现服务注册和发现(请对比Zookeeper). Eureka 采用了 C-S 的设计架构 ...

  5. 设计模式C++描述----20.迭代器(Iterator)模式

    一. 举例说明 我们知道,在 STL 里提供 Iterator 来遍历 Vector 或者 List 数据结构. Iterator 模式也正是用来解决对一个聚合对象的遍历问题,将对聚合的遍历封装到一个 ...

  6. 怎样通过excel录入来批量造数据

    背景: 自动化测试除了验证系统功能外,还能够为测试人员根据测试要求造数据实现测试需要!但是一般的自动化测试,都是在编写脚本的时候,写死在程序里的.所以本文是为了在满足系统操作流程的基础上,根据测试的要 ...

  7. 提高首屏页面加载速度,解决vue-cli打包后单个文件过大的问题

    本教程是针对vue-cli3以上的版本,其实原理都大同小异,这个demo为vue-cli直接创建的项目,并在main.js中引入了echart.element-ui.lodash 首先看demo打包后 ...

  8. (二)golang--windows下vscode的安装以及go环境的配置

    在官网上下载vscode对应的安装包,进行安装: 安装的时候记得勾选加入到path路径: 下载go语言的SDK:https://studygolang.com/dl目前最新版本是1.13.4,我就下这 ...

  9. 学习笔记02form

    1.<form>为表单标签*如果要把数据提交到服务器,则需要将<input> <textarea> <select>等表单元素放到<from> ...

  10. [考试反思]1028csp-s模拟测试91:预估

    这一轮是要闹哪样啊???前十都死活进不去??? 能不能不要到联赛前突然连续掉链子啊!!! 总算难得的切掉了T1.然后又一次把T2和T3的难度估反了 结果给T2剩下了30分钟,想到正解来不及打了. 然后 ...