【CSS】是時(shí)候使用is()減少你的代碼了

is()是什么？

is()是一個(gè)CSS偽類函數(shù)，該函數(shù)將選擇器列表作為參數(shù)，并選擇該列表中任意一個(gè)選擇器可以選擇的元素。舉個(gè)例子就比擬清晰的理解：

使用前：

ulli,

olli{}

使用后：

:is(ul,ol)li{}

優(yōu)化我們的代碼

假如我們系統(tǒng)比擬復(fù)雜，is()可以幫忙我們簡(jiǎn)化代碼，比方如下代碼：

/*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;

}

簡(jiǎn)化成：

/*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錯(cuò)誤

假如我們的CSS中有錯(cuò)誤，將導(dǎo)致整個(gè)選擇器不生效。比方下面的.content寫成:content。demo地址[1]

IamGopal

我是鍋巴

IamGopal

我是鍋巴

/*寫錯(cuò)，將導(dǎo)致都不生效*/

.container-1.title,.container-1:content{

color:#885c5c;

}

但假如使用:is()，.title選擇器依然可以生效，如下：

/*content寫錯(cuò)，title還可以生效*/

.container-2:is(.title,:content){

color:#885c5c;

}

is()VSCSS預(yù)處理器

is()和CSS預(yù)處理器中的嵌套規(guī)那么很相像，如下所示：

div,p,ul,ol{

span{

/*...*/

}

}

/*最終解析成*/

divspan,pspan,ulspan,olspan{

/*...*/

}

下列是:is()的實(shí)現(xiàn)

:is(div,p,ul,ol)span{

}

但需要注意的是它們的優(yōu)先級(jí)是不一樣的。

優(yōu)先級(jí)

通過(guò):is()匹配到元素的優(yōu)先級(jí)，會(huì)采用:is()選擇器列表參數(shù)中優(yōu)先級(jí)最高的計(jì)算〔即使它不存在〕。

理解起來(lái)有點(diǎn)拗口，直接看一個(gè)demo地址[2]

IamGopal

我是鍋巴

/*計(jì)算的時(shí)候，取.list，而不是ul。其優(yōu)先級(jí)為011*/

:is(ol,.list,ul)li{

color:#885c5c;

}

/*優(yōu)先級(jí)為002*/

ulli{

color:#000;

}

在使用:is()的時(shí)候，它的參數(shù)為ol,.list,ul，取最高的.list計(jì)算，其優(yōu)先級(jí)為011。而ulli的優(yōu)先級(jí)是002。所以會(huì)是:is