大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注? 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！
原文链接 ==>http://sylblog.xin/archives/66
前言新人在入门CSS的时候，往往最困惑的就是两件事情（个人想法）：1. CSS是基于文档流的，有些时候编写的代码，并不符合自己的预期！复杂的选择器，什么场景用什么选择器，选择器太长，让新人很困恼，。最近在公司的代码中发现了这样一段代码。
.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; }乍一看真的特别多，作为交接人，我真的看呆了，这也忒长了吧。
大家可以开动自己的小脑筋，尝试不同的方案，去简化简写这段带代码！
本文我们来讲讲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 特定元素: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; } 多个: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> 权重: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。
再看下面的写法，我们给is的参数加了一个id: #olID,最终的颜色就是红色。这就是因为is使用了权重更高的id选择器。
:is(ol,#olID) li { color: red; } ol li { color: blue; } :where:where和:is的语法参数完全一致。唯一不同的就是:where的权重永远为0,或者说是最卑微的。 还是上面那个例子。
<ol id="olID"> <li>li1</li> <li>li2</li> </ol>这里我们：
ol li { color: blue; } :where(ol,#olID) li { color: red; }最后的结果是蓝色
应用场景因为要说了，既然有了is为啥还要:where?个人觉得，:where还是很有用的。比如说在开发组件库的时候，可以使用，因为where的权重很低，那么使用者是不是很容易覆盖了，就不需要什么!imprtant，v-deep之类的了。
PS: 可以优化前言中的小栗子
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
