好物分享 | 🤑这次，has伪类好像真的来了
未必素娥无怅恨，玉蟾清冷桂花孤。——晏殊·中秋月
前后忙碌月多，整个项目组单独成立分公司，开不完的大会，吃不完的大饼🤮...
终于在中秋节后，一切又归于平静，在下又能网上冲浪，四处摸鱼了👋🐟。
今儿个不写动效（其实是灵感枯竭），今儿个来聊聊一位重磅的、闻名已久的、肥肠好使的css伪类家族成员：:has伪类。
我们好像在哪见过？
在下相信，跟在下一样到处👋🐟的同学，一定或多或少也听说过这个has伪类，但是好像又从来都没有用过，似曾相识，却素未谋面，朦胧而又神秘。（👂：我们好像在哪儿见过，你记得吗？）
咳咳...
其实说到has伪类，已经不能算是一个新的东西了，has伪类的规范其实制定的很早很早。那到底有多早呢？这么说吧，如果说规范制定算作has伪类的诞生的话，那与在下年纪相仿。
但是为什么一直没有被用起来呢？究其原因，其实是因为浏览器厂商们的担忧——性能消耗。
众所周知，页面DOM的渲染是构建DOM树从上往下渲染的，而这位has伪类，却是通过子元素去匹配对应的父元素，设置父元素的样式，那么势必它就一定要等子元素渲染出来以后才能去进行后续操作，这样一种方式必然会影响网页的渲染速度，从而影响用户体验。
偏偏好巧不巧，has伪类的功能却又非常强大，一定会被大量使用，从而就会导致无法预估的性能消耗，所以在设计之初，has伪类就被明确规定不能用于CSS样式中了。
我曾需要你但你不在
不知道是否只有在下遇到类似这样的问题：子元素样式发生变化，父元素也需要随之而发生变化。
而当时，在下第一反应就是，CSS中有子选择器，那有没有父选择器。查阅各种资料后无果，最终只能通过JS操作dom完成。
（从小就被教育尽量不要直接操作dom元素的在下内心充满了罪孽感...😭）
而这个与在下年纪相仿的has伪类，其实就是在下心心念念的父选择器，满足条件，却不能被使用。
我需要你，但你不在，又是夺摩的悲哀。
2022，我们终将相遇
盼望着，盼望着，它终于来了。
这里有一家公司，它叫Igalia，具体是谁，到底干啥的，咱不需要了解。
咱只要知道，它搞定了一个事情：解决了浏览器几十年来无法解决的性能问题。
咋解决的在下不了解，在下只知道，这意味着曾经在下可望不可即的has伪类，它终于要来了！！
就在2022！就在这俩月！九栽锦天！
截止目前（2022/9/14），Chrome105及之后版本、Edge最新版本以及Safari已经完成了对 :has伪类 的支持，而Firefox也开启了实验支持。（快看快看！！）
所以，就照着今年这个浏览器版本迭代的速度，很快在下就可以在项目中愉快的使用父选择器了。
初次见面，请多关照
闲话扯了一堆，今儿个在下就简单介绍一下这位又老又新的朋友——:has()
其实 :has() 的语法比较简单，套用MDN的介绍：
:has代表一个元素，其给定的选择器参数（相对于该元素的:scope）至少匹配一个元素。注意，请记住介绍里括号中的内容（
:scope）
而 :has() 的使用语法也很简单：
:has( <相对选择器列表> )
他可以接收一个元素，也可以接收一个元素列表，通过接收的参数至少匹配一个元素（当然前提是你得写对）。
接下来就跟随在下去一个个浅尝和测试一下这位新成员的用法。
环境：Chrome 105.0.5195.102（正式版本）（64 位）
.class
class选择器，也是最常用的选择器之一，那我们就从最常用的开刀。
<div class="demo">
我有一个class为foo的子元素
<div class="foo"></div>
</div>
<div class="demo">
我有一个class为bar的子元素
<div class="bar"></div>
</div>
匹配包含class为foo的元素（即匹配.foo的父元素）。
.demo:has(.foo) {
background-color: aqua;
}
通过一个简单的尝试，在下成功的实现了对.foo的父元素的选择，但是对.bar的父元素没有进行任何操作，从而实现了父选择器的功能。
咱们接着尝试。
#id
<div class="demo0">
我有一个id为foo的子元素
<div id="foo"></div>
</div>
<div class="demo0">
我有一个id为bar的子元素
<div id="bar"></div>
</div>
匹配包含id为foo的元素（即匹配#foo的父元素）。
.demo0:has(#foo) {
background-color: yellowgreen;
}
element
匹配包含span元素的元素（即匹配span的父元素）
<div class="demo1">
我有span元素
<span></span>
</div>
<div class='demo1'>
我没有span元素
</div>
.demo1:has(span) {
background-color: skyblue;
}
传递一个列表
前面MDN的介绍中提到， :has() 可以接收一个列表，所以在下也试试。
匹配包含class为foo或者包含span元素的父元素（即.foo或者span的父元素）
<div class="demo">
我有一个class为foo的子元素
<div class="foo"></div>
</div>
<div class="demo">
我有一个id为bar的子元素
<div id="bar"></div>
</div>
<div class="demo">
我有一个span子元素
<span></span>
</div>
.demo:has(.foo, span) {
background-color: blanchedalmond;
}
:has()嵌套
上一个是匹配包含.foo或者span的父元素，那如果想要匹配同时包含.foo和span的父元素怎么操作？
当然是嵌套啦
<div class="demo">
我有一个class为foo的子元素
<div class="foo"></div>
</div>
<div class="demo">
我有一个span子元素
<span></span>
</div>
<div class="demo">
我有一个span子元素和一个class为foo的子元素
<span></span>
<div class="foo"></div>
</div>
.demo:has(span):has(.foo) {
background-color: gold;
}
> element
匹配包含直接class为foo子元素的元素（即.class的直接父元素，非其他爷爷元素）
<div class="demo2">
我有直接子元素i
<i></i>
</div>
<div class="demo2">
我有非直接子元素i
<span>
<i></i>
</span>
</div>
.demo2:has(> i) {
background-color: orange;
}
注意，匹配直系父元素时，has()里不能用 :has(.demo2 > i) 的形式
原因是前面MDN介绍中提到的
:scope，如果用上面这个形式，会找不到.demo2，所以如果要匹配直系父元素，请使用 :has(> 子元素) 的方式，
现在部分编辑器可能会有报错提示，但是实际上是可以匹配成功的
+ element
相信同学们都用过element + element的选择器，称为兄弟选择器，它是用来匹配紧跟在元素后面的第一个元素。
那么能匹配紧跟在元素前面的第一个元素吗？
:has()：当然可以！
<div>
<div class="demo3">
我有紧跟的兄弟元素i
</div>
<i>
</i>
</div>
<div>
<div class="demo3">
我有不紧跟的兄弟元素i
</div>
<span></span>
<i></i>
</div>
.demo3:has(+ i) {
background-color: pink;
}
~ element
同理，element ~ element用来匹配元素后面的所有对应兄弟元素，:has() 也可以匹配对应兄弟元素前面的元素
<div>
<div class="demo4">
我后面有兄弟span
</div>
<i></i>
<span></span>
</div>
<div>
<div class="demo4">
我后面没有兄弟span
</div>
<i></i>
<i></i>
</div>
.demo4:has(~ span) {
background-color: green;
}
编辑器可能会报错，但是不影响
[attribute]
咱可以通过element[attribute]来匹配一个包含某个属性的元素，反之也可以用 :has() 来匹配一个包含某个拥有attribute属性子元素的父元素。（有点绕...）
匹配包含有name属性的span元素的父元素
<div class="demo7">
我有子元素span，它有name属性
<span name="test"></span>
</div>
<div class="demo7">
我有子元素span，它没有name属性
<span></span>
</div>
.demo7:has(span[name]) {
background-color:aqua;
}
其他与匹配属性相关的方法就不列举了。
:hover等其他伪类
同时 :has() 也可以与其他伪类匹配使用，这里在下列举的是 :hover 伪类
匹配子元素被鼠标悬停的得父元素
<div class="demo">
我是我是按钮1的父元素
<div class="btn">我是按钮1</div>
</div>
<div class="demo">
我是我是按钮2的父元素
<div class="btn">我是按钮2</div>
</div>
.demo:has(.btn:hover) {
background-color: aquamarine;
}
只是一个简单的分享，为了避免篇幅太长，其他伪类在下也不再赘述了。
往后余生，来日方长
通过跟随在下进行了少量的尝试以后，是否已经对 :has() 有了初步的了解，亦或是已经熟练掌握？
其实 :has() 伪类的用法简单，应用场景却非常之广泛，而其他更具体的灵活使用方法，则需要在漫长的业务代码中各自探索了。
很多同学肯定在想：这不就是个简单的CSS伪类吗，也谈不上功能强大把？
试想一下，当我们 以body或者html为最终的父元素，从页面的任何一个元素逐层网上查询，当我们拿到这个最终父元素后，是不是顺其自然的就可以拿到任何一个子元素了？
那么，是不是也就意味着，在处理某一个元素被修改的同时，在八百里开外的某个元素也需要随之修改样式时，我们将不在依赖JS，或者变量传来传去，而是可以直接通过 :has() 伪类进行查找匹配后直接修改😉。
好吧，听起来好像也没有很强大，算了，遇到在聊吧。
