[[440852]]

 deis()  么？

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

使用前： 

ul li,  
ol li {} 

使用后： 

:is(ul, ol) li {} 

優化我們的代碼

假如我們系統比較復雜，is() 可以幫助我們簡化代碼，比如如下代碼： 

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

簡化成： 

/* 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 錯誤

假如我們的 CSS 中有錯誤，將導致整個選擇器不生效。比如下面的 .content 寫成 :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>  

/* 寫錯，將導致都不生效 */ 
.container-1 .title, .container-1 :content {  
  color: #885c5c;  
} 

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

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

is() VS CSS 預處理器

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

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

以下是 :is() 的實現 

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

但需要注意的是它們的優先級是不一樣的。

優先級

通過 :is() 匹配到元素的優先級，會采用 :is() 選擇器列表參數中優先級最高的計算（即使它不存在）。

理解起來有點拗口，直接看一個 demo 地址[2] 

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

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

在使用 :is() 的時候，它的參數為 ol, .list, ul，取最高的 .list 計算，其優先級為 0 1 1。而 ul li 的優先級是 0 0 2。所以會是 :is() 選擇器生效，即使后者寫在后面，這個跟預選擇器是有區別的，使用預選擇器會被后面的覆蓋。

兼容性

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