5分钟读懂css伪类选择器:is :not

2020-07-09 07:42:54易采站长站整理

之前的做法

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组合是大势所趋

本文来自PHP中文网,CSS教程栏目,欢迎学习