深入學習CSS中的 :is() 和 :where()，讓樣式程式碼更簡潔！

這篇文章帶大家深入了解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>

這裡我們：

:where(ol,#olID) li {
  color: red;
}
ol li {
  color: blue;
}

最後的結果是藍色

#應用場景

因為要說了，既然有了is為啥還要:where?個人覺得，:where還是很有用的。比如說在開發元件庫的時候，可以使用，因為where的權重很低，那麼使用者是不是很容易覆蓋了，就不需要什麼!imprtant，v-deep之類的了。

PS: 可以優化前言中的小栗子

原文網址：https://juejin.cn/ post/7005366966554722312

作者：前端picker

更多程式相關知識，請造訪：程式設計影片！ ！

以上是深入學習CSS中的 :is() 和 :where()，讓樣式程式碼更簡潔！的詳細內容。更多資訊請關注PHP中文網其他相關文章！