is()是一个CSS伪类函数，该函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。举个例子就比较清晰的理解：
使用前：
ulli,olli{}
使用后：
:is(ul,ol)li{}优化我们的代码
假如我们系统比较复杂，is()可以帮助我们简化代码，比如如下代码：
/*3-deep(ormore)unorderedlistsuseasquare*/ololul,olulul,olmenuul,oldirul,ololmenu,olulmenu,olmenumenu,oldirmenu,ololdir,oluldir,olmenudir,oldirdir,ulolul,ululul,ulmenuul,uldirul,ulolmenu,ululmenu,ulmenumenu,uldirmenu,uloldir,ululdir,ulmenudir,uldirdir,menuolul,menuulul,menumenuul,menudirul,menuolmenu,menuulmenu,menumenumenu,menudirmenu,menuoldir,menuuldir,menumenudir,menudirdir,dirolul,dirulul,dirmenuul,dirdirul,dirolmenu,dirulmenu,dirmenumenu,dirdirmenu,diroldir,diruldir,dirmenudir,dirdirdir{list-style-type:square;}
简化成：
/*3-deep(ormore)unorderedlistsuseasquare*/:is(ol,ul,menu,dir):is(ol,ul,menu,dir)ul,:is(ol,ul,menu,dir):is(ol,ul,menu,dir)menu,:is(ol,ul,menu,dir):is(ol,ul,menu,dir)dir{list-style-type:square;}避免CSS错误
假如我们的CSS中有错误，将导致整个选择器不生效。比如下面的.content写成:content。demo地址[1]
divclass="container-1"pclass="title"IamGopal/pdivclass="content"我是锅巴/div/divdivclass="container-2"pclass="title"IamGopal/pdivclass="content"我是锅巴/div/div
/*写错，将导致都不生效*/.container-1.title,.container-1:content{color:#c5c;}
但假如使用:is()，.title选择器依然可以生效，如下：
/*content写错，title还可以生效*/.container-2:is(.title,:content){color:#c5c;}is()VSCSS预处理器
is()和CSS预处理器中的嵌套规则很相像，如下所示：
div,p,ul,ol{span{/*...*/}}/*最终解析成*/divspan,pspan,ulspan,olspan{/*...*/}
以下是:is()的实现
:is(div,p,ul,ol)span{}
但需要注意的是它们的优先级是不一样的。
优先级通过:is()匹配到元素的优先级，会采用:is()选择器列表参数中优先级最高的计算（即使它不存在）。
理解起来有点拗口，直接看一个demo地址[2]
ulclass="container-3"liclass="title"IamGopal/liliclass="content"我是锅巴/li/ul
/*计算的时候，取.list，而不是ul。其优先级为*/:is(ol,.list,ul)li{color:#c5c;}/*优先级为*/ulli{color:#;}
在使用:is()的时候，它的参数为ol,.list,ul，取最高的.list计算，其优先级为。而ulli的优先级是。所以会是:is()选择器生效，即使后者写在后面，这个跟预选择器是有区别的，使用预选择器会被后面的覆盖。
兼容性:is()兼容性，IE还是全军覆没，但很多场景可以用起来了。详情[3]
参考:is[4]MDN[5]参考资料[1]demo