咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

常见问题

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

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://cqcxhl.cn/article/jsjcdg.html

    其他资讯

    分享至：
    关于我们
    公司简介 发展历程
    服务项目
    高端网站建设 小程序开发 APP开发 网络营销
    建站知识
    网站建设 网站设计 网站制作 小程序
    联系我们
    公司地址 人才招聘
    成都 重庆
    电话：028-86922220
    地址：成都市太升南路288号锦天国际A幢1002号
    电话：028-86922220
    地址：重庆市南岸区弹子石腾龙大道58号2栋21-6
    版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4
    在线咨询
    服务热线
    服务热线：028-86922220
    TOP