当前位置: 首页 > 科技观察

来用CSS的-is()

时间:2023-03-17 11:35:10 科技观察

deis()减少你的代码?is()是一个CSS伪类函数,它将选择器列表作为参数,并选择列表中任何一个选择器可以选择的元素。举个例子可以更清楚的理解:使用前:ulli,olli{}使用后::is(ul,ol)li{}优化我们的代码如果我们的系统比较复杂,is()可以帮助我们简化代码,对于示例以下代码:/*3-deep(ormore)unorderedlistsseasquare*/ololul,olulul,olmenuul,oldirul,ololmenu,olulmenu,olmenumenu,oldirmenu,ololdir,oluldir,olmenudir,oldirdir,ulolul,ululul,ulmenuul,uldirul,ulolmenu,ululmenu,ulmenumenu,uldirmenu,uloldir,ululdir,ulmenudir,uldirdir,menuol??ul,menuulul,menmenuul,menuudirul,menuol??menu,menuulmenu,menumenumenu,menuudirmenu,menuol??dir,menuuldir,menumenudir,menuudir,dirolul,dirulul,dirmenuul,dirdirul,dirmenumenudirmenu迪尔,diruldir,dirmenudir,dirdirdir{list-style-type:square;}简化为:/*3-deep(ormore)unorderedlistsseasquare*/: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。演示地址[1]IamGopal

我是锅巴
IamGopal

我是锅巴
/*写错了,不会生效*/.container-1.title,.container-1:content{color:#885c5c;}但是如果使用:is(),.title选择器仍然可以生效,如下:/*content写错了,title仍然可以生效*/.container-2:is(.title,:content){color:#885c5c;}is()VSCSS预处理器is()与CSS预处理器中的嵌套规则非常相似,如下:div,p,ul,ol{span{/*...*/}}/*最终解析成*/divspan,pspan,ulspan,olspan{/*...*/}下面是is()的实现:is(div,p,ul,ol)span{}但是需要注意的是它们的优先级是不同的。通过:is()与元素匹配的优先级将以:is()选择器列表参数中的最高优先级计算(即使它不存在)。理解起来有点啰嗦,看一个demo地址[2]IamGopal我是锅巴/*计算时,取.list而不是ul。它的优先级是011*/:is(ol,.list,ul)li{color:#885c5c;}/*使用:is()时优先级是002*/ulli{color:#000;},它的参数是ol,.list,ul,最高的.list用于计算,其优先级为011。而ulli的优先级为002。所以:is()选择器会生效,即使latter是后写的,这个和pre-selector不同,pre-selector会被后者覆盖。Compatibility:is()Compatibility,IE还是全灭了,但是很多场景是可以用的。详情[3]