創作不易 拒絕白嫖 點個贊呗
關注專欄
學透CSS ,帶你走進CSS的深處！！！
前言
新人在入門CSS的時候，往往最困惑的就是兩件事情（個人想法）：1. CSS是基于文檔流的，有些時候編寫的代碼，并不符合自己的預期！
2.複雜的選擇器，什麼場景用什麼選擇器，選擇器太長，讓新人很困惱，。最近在公司的代碼中發現了這樣一段代碼。
.home .col .card a i.i1,
.home .col .card a i.i2,
.home .col .card a i.i3,
.home .col .card a i.i4,
.home .col .card a i.i5,
.home .col .card a i.i5,
.home .col .card a i.i6,
.home .col .card a i.i7 {
background-size: 35px;
width: 60px;
height: 42px;
margin: auto;
} 乍一看真的特别多，作為交接人，我真的看呆了，這也忒長了吧。
大家可以開動自己的小腦筋，嘗試不同的方案，去簡化簡寫這段帶代碼！
本文我們來講講CSS3比較高效的選擇器，保證讓人眼前一亮的選擇器。
:is
用更少的代碼去更有效地選擇元素！666，牛逼！！！
簡單的來說就是 通過提取共通的選擇器，來簡化代碼！
注意: :is() 原名 :match()
舉例1. 全局 :is
場景：在前端開發的時候，某些情況下，在不同的div下，可能文本的顔色是一緻的。
例如下面的三個div，三個div的文本顔色都是紅色。
<div class="div1">
<p>p1</p>
</div>
<div class="div2">
<p>p2</p>
</div>
<div class="div3">
<p>p3</p>
</div> 初級版本（新手）
對于很多新手，确實是會出現下面的寫法：針對不同的div的p進行相同的設定。
.div1>p{
color:red;
}
.div2>p{
color:red;
}
.div3>P{
color:red;
} 進階版本
随着編寫代碼的增多，新手逐漸發現，有很多共同的代碼，可以提取出來。比如這裡的color:red ，就可以提取出來。哇，代碼瞬間減少了很多！！！
.div1>p,
.div2>p,
.div3>P{
color:red;
} 進階版本（:is）
這時候新手又覺得了，既然color:red;可以提出來，那為什麼p不提出來呢？
于是出現了下面更簡潔的版本。
:is(.div1,.div2,.div3) >P {
color:red;
} 
舉例2 特定元素:is
且看下面的代碼，我們想要實作div的顔色是紅色的，并且顔色定義是在textColor種，并且保持p是黑色的。
<div class="textColor">
p1
</div>
<div class="textColor">
p2
</div>
<div class="textColor">
p3
</div>
<p class="textColor">p4</p> 看了上面的舉例1，我估計有些新手就要開始這樣寫了：直接給p标簽添加新的式樣。
:is(.textColor) {
color:red;
}
.pColor{
color: black;
}
<p class="textColor pColor">p4</p> 但是:is是支援特定元素的寫法的:你隻需要在:is 前面添加
div:is(.textColor) {
color:red;
} 多個:is
div:is(.textColor) :is(h1,h4){
color:red;
}
<div class="textColor">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
</div> 權重
:is 的權重是由提供的id，元素等選擇器決定的；可能比較難了解。一個例子馬上明白。
<ol id="olID">
<li>li1</li>
<li>li2</li>
</ol> 我們來更改li的字型顔色。
:is(ol) li {
color: red;
}
ol li {
color: blue;
} 大家可以猜一下是什麼顔色。
是藍色：為啥呢，首先is的參數是ol與下面的那個ol選擇器的權重一緻。并且由于blue是在下面的，浏覽器自動使用blue覆寫掉了red。
再看下面的寫法，我們給is的參數加了一個id: #olID,最終的顔色就是紅色。這就是因為is使用了權重更高的id選擇器。
:is(ol,#olID) li {
color: red;
}
ol li {
color: blue;
} :where
:where和:is的文法參數完全一緻。唯一不同的就是:where的權重永遠為0,或者說是最卑微的。
還是上面那個例子。
<ol id="olID">
<li>li1</li>
<li>li2</li>
</ol> 這裡我們：
ol li {
color: blue;
}
:where(ol,#olID) li {
color: red;
}
最後的結果是藍色
應用場景
因為要說了，既然有了is為啥還要:where?個人覺得，:where還是很有用的。比如說在開發元件庫的時候，可以使用，因為where的權重很低，那麼使用者是不是很容易覆寫了，就不需要什麼!imprtant，v-deep之類的了。
PS: 可以優化前言中的小栗子