首页 php下载 php教程 电脑软件 手机软件 手机游戏 单机游戏 资讯文章 专题下载 标签合集

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

时间:2021-10-01

来源:互联网

在手机上看
手机扫描阅读

今天PHP爱好者为您带来本篇文章带大家深入了解CSS中的两个比较高效的选择器,通过它们可以用更少的代码去更有效地选择元素,进而简化代码,下面一起来看看吧!希望对大家有所帮助。

举例1. 全局 :is

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

例如下面的三个p,三个p的文本颜色都是红色。

<p class="p1">
       <p>p1</p>
   </p>
   <p class="p2">
       <p>p2</p>

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

初级版本(新手)

对于很多新手,确实是会出现下面的写法:针对不同的p的p进行相同的设置。

.p1>p{
   color:red;
}
.p2>p{
   color:red;
}
.p3>P{
   color:red;
}

进阶版本

随着编写代码的增多,新手逐渐发现,有很多共同的代码,可以提取出来。比如这里的color:red ,就可以提取出来。哇,代码瞬间减少了很多!!!

.p1>p,
.p2>p,
.p3>P{
   color:red;
}

高级版本(:is)

这时候新手又觉得了,既然color:red;可以提出来,那为什么p不提出来呢? 于是出现了下面更简洁的版本。

:is(.p1,.p2,.p3) >P {
 color:red;
}

2.png

举例2 特定元素:is

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

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

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

:is(.textColor) {    color:red;

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

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

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

3.png

多个:is

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

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爱好者其它相关文章!

相关阅读 更多

热门下载

更多