登录  /  注册
首页 > web前端 > css教程 > 正文

深入学习CSS中的 :is() 和 :where(),让样式代码更简洁!

青灯夜游
发布: 2021-09-23 11:19:22
转载
6467人浏览过

本篇文章带大家深入了解css中的两个比较高效的选择器,通过它们可以用更少的代码去更有效地选择元素,进而简化代码,下面一起来看看吧!

深入学习CSS中的 :is() 和 :where(),让样式代码更简洁!

新人在入门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;
}
登录后复制

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

1.png

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

本文我们来讲讲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.png

举例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;
}
登录后复制

3.png

多个: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>
登录后复制

4.png

权重

: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。

5.png

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

 :is(ol,#olID) li {
        color: red;
      }
      ol li {
        color: blue;
      }
登录后复制

6.png

: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;
}
登录后复制

最后的结果是蓝色

7.png

应用场景

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

8.png

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

原文地址:https://juejin.cn/post/7005366966554722312

作者:前端picker

更多编程相关知识,请访问:编程视频!!

以上就是深入学习CSS中的 :is() 和 :where(),让样式代码更简洁!的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金--前端picker网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号