[[440852]]

 deis()  么？

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

使用前： 

ul li,  
ol li {} 

使用后： 

:is(ul, ol) li {} 

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

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

/* 3-deep (or more) unordered lists use a square */  
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,  
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,  
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,  
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,  
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,  
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,  
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,  
menu ol menu, menu ul menu, menu menu menu, menu dir menu,  
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,  
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,  
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,  
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {  
  list-style-type: square;  
} 

簡(jiǎn)化成： 

/* 3-deep (or more) unordered lists use a square */  
: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 寫(xiě)成 :content。demo 地址[1] 

<div class="container-1">  
  <p class="title">I am Gopal</p>  
  <div class="content">我是鍋巴</div>  
</div>  
<div class="container-2">  
  <p class="title">I am Gopal</p>  
  <div class="content">我是鍋巴</div>  
</div>  

/* 寫(xiě)錯(cuò)，將導(dǎo)致都不生效 */ 
.container-1 .title, .container-1 :content {  
  color: #885c5c;  
} 

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

/* content 寫(xiě)錯(cuò)，title 還可以生效 */  
.container-2 :is(.title, :content) {  
  color: #885c5c;  
} 

is() VS CSS 預(yù)處理器

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

div, p, ul, ol {  
  span {  
    /* ... */  
  }  
}  
/* 最終解析成 */  
div span, p span, ul span, ol span {  
  /* ...*/  
} 

以下是 :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] 

<ul class="container-3">  
  <li class="title">I am Gopal</li>  
  <li class="content">我是鍋巴</li>  
</ul>  

/* 計(jì)算的時(shí)候，取 .list，而不是 ul。其優(yōu)先級(jí)為 0 1 1 */  
:is(ol, .list, ul) li { 
  color: #885c5c;  
}  
/* 優(yōu)先級(jí)為 0 0 2 */  
ul li {  
  color: #000;  
} 

在使用 :is() 的時(shí)候，它的參數(shù)為 ol, .list, ul，取最高的 .list 計(jì)算，其優(yōu)先級(jí)為 0 1 1。而 ul li 的優(yōu)先級(jí)是 0 0 2。所以會(huì)是 :is() 選擇器生效，即使后者寫(xiě)在后面，這個(gè)跟預(yù)選擇器是有區(qū)別的，使用預(yù)選擇器會(huì)被后面的覆蓋。

兼容性

:is() 兼容性，IE 還是全軍覆沒(méi)，但很多場(chǎng)景可以用起來(lái)了。詳情[3]