這篇文章將為大家詳細(xì)講解有關(guān)CSS中的 :is() 和 :where()怎么用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

10年積累的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有玉屏免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

新人在入門CSS的時(shí)候，往往最困惑的就是兩件事情（個(gè)人想法）：1. CSS是基于文檔流的，有些時(shí)候編寫的代碼，并不符合自己的預(yù)期！ 2.復(fù)雜的選擇器，什么場(chǎng)景用什么選擇器，選擇器太長(zhǎng)，讓新人很困惱，。最近在公司的代碼中發(fā)現(xiàn)了這樣一段代碼。

.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;
}

乍一看真的特別多，作為交接人，我真的看呆了，這也忒長(zhǎng)了吧。

大家可以開(kāi)動(dòng)自己的小腦筋，嘗試不同的方案，去簡(jiǎn)化簡(jiǎn)寫這段帶代碼！

本文我們來(lái)講講CSS3比較高效的選擇器，保證讓人眼前一亮的選擇器。

:is

用更少的代碼去更有效地選擇元素！666，牛逼?。?！

簡(jiǎn)單的來(lái)說(shuō)就是 通過(guò)提取共通的選擇器，來(lái)簡(jiǎn)化代碼！

注意: :is() 原名  :match()

舉例1. 全局 :is

場(chǎng)景：在前端開(kāi)發(fā)的時(shí)候，某些情況下，在不同的div下，可能文本的顏色是一致的。

例如下面的三個(gè)div，三個(gè)div的文本顏色都是紅色。

    <div class="div1">
        <p>p1</p>
    </div>
    <div class="div2">
        <p>p2</p>

    </div>
    <div class="div3">
        <p>p3</p>
    </div>

初級(jí)版本（新手）

對(duì)于很多新手，確實(shí)是會(huì)出現(xiàn)下面的寫法：針對(duì)不同的div的p進(jìn)行相同的設(shè)置。

.div1>p{
    color:red;
}
.div2>p{
    color:red;
}
.div3>P{
    color:red;
}

進(jìn)階版本

隨著編寫代碼的增多，新手逐漸發(fā)現(xiàn)，有很多共同的代碼，可以提取出來(lái)。比如這里的color:red ，就可以提取出來(lái)。哇，代碼瞬間減少了很多！??！

.div1>p,
.div2>p,
.div3>P{
    color:red;
}

高級(jí)版本（:is）

這時(shí)候新手又覺(jué)得了，既然color:red;可以提出來(lái)，那為什么p不提出來(lái)呢？ 于是出現(xiàn)了下面更簡(jiǎn)潔的版本。

:is(.div1,.div2,.div3) >P {
  color:red;
}

舉例2 特定元素:is

且看下面的代碼，我們想要實(shí)現(xiàn)div的顏色是紅色的，并且顏色定義是在textColor種，并且保持p是黑色的。

<div class="textColor">
        p1
</div>
<div class="textColor">
    p2
</div>
<div class="textColor">
    p3
</div>
<p class="textColor">p4</p>

看了上面的舉例1，我估計(jì)有些新手就要開(kāi)始這樣寫了：直接給p標(biāo)簽添加新的式樣。

:is(.textColor) {    color:red;

}.pColor{   color: black;
}
<p class="textColor pColor">p4</p>

但是:is是支持特定元素的寫法的:你只需要在:is 前面添加

div:is(.textColor) {
    color:red;
}

多個(gè):is

div:is(.textColor) :is(h2,h5){
  color:red;
}
<div class="textColor">
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
</div>

權(quán)重

:is 的權(quán)重是由提供的id，元素等選擇器決定的；可能比較難理解。一個(gè)例子馬上明白。

<ol id="olID">
    <li>li1</li>
    <li>li2</li>
</ol>

我們來(lái)更改li的字體顏色。

:is(ol) li {
  color: red;
}
ol li {
  color: blue;
}

大家可以猜一下是什么顏色。

是藍(lán)色：為啥呢，首先is的參數(shù)是ol與下面的那個(gè)ol選擇器的權(quán)重一致。并且由于blue是在下面的，瀏覽器自動(dòng)使用blue覆蓋掉了red。

再看下面的寫法，我們給is的參數(shù)加了一個(gè)id: #olID,最終的顏色就是紅色。這就是因?yàn)閕s使用了權(quán)重更高的id選擇器。

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

:where

:where和:is的語(yǔ)法參數(shù)完全一致。唯一不同的就是:where的權(quán)重永遠(yuǎn)為0,或者說(shuō)是最卑微的。 還是上面那個(gè)例子。

<ol id="olID">
  <li>li1</li>
  <li>li2</li>
</ol>

這里我們：

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

最后的結(jié)果是藍(lán)色

應(yīng)用場(chǎng)景

因?yàn)橐f(shuō)了，既然有了is為啥還要:where?個(gè)人覺(jué)得，:where還是很有用的。比如說(shuō)在開(kāi)發(fā)組件庫(kù)的時(shí)候，可以使用，因?yàn)閣here的權(quán)重很低，那么使用者是不是很容易覆蓋了，就不需要什么!imprtant，v-deep之類的了。

關(guān)于CSS中的 :is() 和 :where()怎么用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：CSS中的:is()和:where()怎么用
本文來(lái)源：http://www.ekvhdxd.cn/article16/jsjcdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、小程序開(kāi)發(fā)、定制開(kāi)發(fā)、網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)