咨询热线 ：
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()怎么用
    文章URL：http://dzwzjz.com/article/jsjcdg.html

    其他资讯

    分享至：
    关于我们
    公司简介 发展历程
    服务项目
    高端网站建设 小程序开发 APP开发 网络营销
    建站知识
    行业新闻 建站学堂 常见问题
    联系我们
    公司地址 人才招聘
    成都 达州
    电话：028-86922220
    地址：成都市太升南路288号锦天国际A幢1002号
    电话：028-86922220
    地址：达州市南岸区弹子石腾龙大道58号2栋21-6
    友情链接： 响应式网站建设   钢筋机械设备   成都网站建设   眉山服务器托管   wap网站建设   IOS开发   雕琢时光茶叶   添翼二手车鉴定评估   传美奇电器   广安做网站   
    版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14
    在线咨询
    服务热线
    服务热线：028-86922220
    TOP