快来看看CSS新增的:has()伪类有多强大吧！！！

今天介绍一个css新增的伪类:has()，这个伪类可以说是颠覆了我们之前的css选择器的思维，它可以通过子元素影响父元素的样式，来和我一起来看看它吧。

1. 在此之前的选择器

在我们以前使用css选择器的时候，我们是通过父元素来影响子元素的样式的，又或者用前一个兄弟元素来影响后一个兄弟元素的样式。

/* 通过父元素影响子元素 */
.parent .child {
   
   
    color: red;
}

/* 通过前一个兄弟元素影响后一个兄弟元素 */
.previous + .next {
   
   
    color: red;
}

为什么css要这样设计呢？为什么不能通过后面的元素影响前面的元素呢？

这里就要说到html的加载机制和css的渲染机制了。

2. html的加载机制

就我们常说的浏览器在敲下一个url回车之后，浏览器会做什么处理来说，浏览器会做以下几件事情：

1. 浏览器会向服务器发送一个http请求，请求url对应的资源
2. 服务器收到请求之后，会根据请求的url，找到对应的资源，然后返回给浏览器
3. 浏览器收到资源之后，会根据资源的类型，进行不同的处理
   1. 如果是html，浏览器会解析html，然后渲染页面
   2. 如果是css，浏览器会解析css，然后渲染页面
   3. 如果是js，浏览器会解析js，然后执行js代码
   4. 如果是图片，浏览器会下载图片，然后显示图片

这里主要就在第三步，浏览器解析html
，它就是一个个的标签，遇到一个标签就会去解析这个标签，是一个个的来的，这里暂停一下，我们再来看看css的渲染机制。

3. css的渲染机制

css的渲染机制就是一个个的选择器，遇到一个选择器就会去渲染这个选择器对应的元素。

如果我们的css选择器是这样的：

.parent .child {
   
   
    color: red;
}

那么浏览器在渲染的时候，就是先找到.parent这个元素，然后再找到.parent下面的.child这个元素，然后再渲染这个元素。

如果我们的css选择器是这样的：

.child .parent {
   
   
    color: red;
}

这里是一个假设的例子，如果是通过子元素影响父元素的样式，那么浏览器在渲染的时候，就要重新回去找.parent，然后再渲染这个元素。

回到上面html加载机制来说，本来之前的标签已经解析完了，然后浏览器又要重新回去找.parent，这样就会造成浏览器的性能问题。

这里的性能问题就是我们常说的回流和重绘，所以在没有这个伪类之前，我们是通过js
控制样式来实现这个效果的，或者用其他的方式来实现这个效果，例如改变dom结构，或者添加很多class来区分，当然这样就带了很高的维护成本。

4. :has()介绍

has()是一个伪类，其给定的选择器参数，必须是一个选择器列表，如果元素的子元素中至少有一个匹配给定的选择器列表，那么这个元素就会被选中。

这里的选择器参数，指的是相对选择器，也就是说，这个选择器是相对于当前元素的，而不是相对于整个文档的。

什么意思呢，我来带你看看：

<div class="parent">
    <p>parent</p>
    <p class="child">child</p>
</div>

<div class="parent">
    <p>parent</p>
</div>

.parent {
   
   
   color: red;
}

.child {
   
   
   color: green;
}

.parent:has(.child) {
   
   
   color: blue;
}

通过上面的效果可以看到，.parent这个元素下面如果有.child这个元素，那么它的颜色是蓝色，就应用到了.parent:has(.child)这个的样式规则，如果没有.child这个元素，那么它的颜色就是红色。

.child并不受影响，它只作为一个选择因子的存在，并不会影响到它的样式，所以它的颜色是绿色。

5. :has()的应用场景

:has()的应用场景，其实就是我们之前提到的，通过子元素影响父元素的样式，例如我们有一个列表，列表的每一项都有一个删除按钮，但是因为权限的问题或者数据的问题，有些列表项是不能删除的，那么我们就可以通过:has()来实现这个效果。

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>
       item3
       <button>delete</button>
    </li>
    <li>item4</li>
    <li>item5</li>
</ul>

li {
   
   
   background: gray;
}

li:has(button) {
   
   
   background: #ffffff;
}

如果在此之前你可以需要单独写一个has-delete的样式来实现这个效果，那么现在就可以通过:has()来实现这个效果了。

当然还有很多其他的应用场景，这些就自己慢慢探索吧。

6. :has()的兼容性

has()目前的兼容性还不是很好，建议不要使用在生产环境中，下面的兼容性来自于caniuse

7. 总结

:has()是一个非常有用的伪类，它可以让我们通过子元素影响父元素的样式，这在一些场景下是非常有用的，但是目前的兼容性还不是很好，所以建议不要在生产环境中使用。