甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

CSS中的:is()和:where()怎么用

这篇文章将为大家详细讲解有关CSS中的 :is() 和 :where()怎么用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

10年积累的成都网站设计、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有玉屏免费网站建设让你可以放心的选择与我们合作。

新人在入门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;
}

乍一看真的特别多，作为交接人，我真的看呆了，这也忒长了吧。

CSS中的 :is() 和 :where()怎么用

大家可以开动自己的小脑筋，尝试不同的方案，去简化简写这段带代码！

本文我们来讲讲CSS3比较高效的选择器，保证让人眼前一亮的选择器。

:is

用更少的代码去更有效地选择元素！666，牛逼！！！

简单的来说就是 通过提取共通的选择器，来简化代码！

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

举例1. 全局 :is

场景：在前端开发的时候，某些情况下，在不同的div下，可能文本的颜色是一致的。

例如下面的三个div，三个div的文本颜色都是红色。

    
        
p1

    
             

p2

    
             

p3

    

初级版本（新手）

对于很多新手，确实是会出现下面的写法：针对不同的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;
}

CSS中的 :is() 和 :where()怎么用

举例2 特定元素:is

且看下面的代码，我们想要实现div的颜色是红色的，并且颜色定义是在textColor种，并且保持p是黑色的。


        p1
    p2
    p3 p4

看了上面的举例1，我估计有些新手就要开始这样写了：直接给p标签添加新的式样。

:is(.textColor) {    color:red;

}.pColor{   color: black;
}
p4

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

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

CSS中的 :is() 和 :where()怎么用

多个:is

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

  
h2

  
h3

  
h4

  
h5

CSS中的 :is() 和 :where()怎么用

权重

:is 的权重是由提供的id，元素等选择器决定的；可能比较难理解。一个例子马上明白。


    
  • li1
    • 
    
  • li2
    •

    我们来更改li的字体颜色。

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

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

    是蓝色：为啥呢，首先is的参数是ol与下面的那个ol选择器的权重一致。并且由于blue是在下面的，浏览器自动使用blue覆盖掉了red。

    CSS中的 :is() 和 :where()怎么用

    再看下面的写法，我们给is的参数加了一个id: #olID,最终的颜色就是红色。这就是因为is使用了权重更高的id选择器。

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

    CSS中的 :is() 和 :where()怎么用

    :where

    :where和:is的语法参数完全一致。唯一不同的就是:where的权重永远为0,或者说是最卑微的。 还是上面那个例子。

    
  
  • li1
    • 
  
  • li2
    •

    这里我们：

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

    最后的结果是蓝色

    CSS中的 :is() 和 :where()怎么用

    应用场景

    因为要说了，既然有了is为啥还要:where?个人觉得，:where还是很有用的。比如说在开发组件库的时候，可以使用，因为where的权重很低，那么使用者是不是很容易覆盖了，就不需要什么!imprtant，v-deep之类的了。

    CSS中的 :is() 和 :where()怎么用

    关于CSS中的 :is() 和 :where()怎么用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


    分享标题：CSS中的:is()和:where()怎么用
    标题链接：http://chengdu.cdxwcx.cn/article/jsjcdg.html

    其他资讯