聊一聊has伪类选择器

一、背景

说到这个选择器那就好玩了，可能大家都知道相邻兄弟选择器【+】和所有相邻兄弟选择器【~】，那么这两个都有同样的作用，也就是是能选择本元素之后的元素，那么今天我就来介绍一下今天的主角，那就是has伪类，话不多说，直接开始。

二、概念介绍

关于has伪类选择器，官网MDN中是这样解释的：

​CSS 函数式伪类 :has() 表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

当然，个人认为这个解释晦涩难懂，但是不要急，我这里再来解释一下，主要解释就是，这个选择器，可以让你在选择元素上更佳灵活，也就是可以让你选中本元素之前的兄弟级别的元素或者是父元素亦或者是祖先元素，这样解释大家就清楚多了吧。

三、使用方式

当前元素之前的元素:has(当前元素)

==注意:这里需要在括号中使用选择器进行选择。==

1. 与兄弟选择器配合使用

h1:has(+ h2) { 
  background: red;
}

<section>
  <article>
      <h1>标题</h1>
      <p>
      	文本一
      </p>
  </article>
  <article>
      <h1>文本二</h1>
      <h2>文本三</h2>
  </article>
</section>

在这里我们选择了h2元素的相邻的前一个h1的兄弟元素，所以文本二的背景会变成红色，效果图就不放在这里了，大家就自己练习一下吧

2. 与子代选择器配合使用

与子代选择器配合使用可以区分文字和图片，然后去分别设置它们的样式

img {
  width: 100px;
}

a:has(>img) {
  display: block;
}

<a href="">文本一</a>
<a href="">
  <img src="imgs/weixin.png" alt="">
</a>
<a href="">
  <img src="imgs/2.webp" alt="">
</a>

这样就可以看到我们就可以通过这个伪类单独选中离img标签最近的a标签，也就是父级a标签元素，然后将其显示模式转为块级元素，节省了非常多的时间，也简化了代码结构。

进一步理解就是has伪类选择器，会从块级区域的根元素找起

==注意：==:has伪类的参数，选择符>直接写在了参数的最前面，而不是a:has(a>img) 这样的写法。你可以理解为:has()前面有一个看不见的:scope伪类，因此这样a:has(a>img)的写法是不合法的 ==相关补充说明：== 【:scope会匹配根级作用域，它的作用取决于它的上下文，如果在html中就可以代替:root ，二者的作用效果是一致的，如果是在块级作用域中使用，就会匹配到块级作用域的根级。】

3. 与后代选择器配合使用

那么如果想要去选中后代img的祖先a标签，我们就需要更改一下书写方式了，代码如下：

img {
  width: 100px;
}

a:has(img) {
  display: block;
}

<a href="">文本一</a>
<a href="">
    <img src="imgs/weixin.png" alt="">
</a>
<a href="">
    <img src="imgs/2.webp" alt="">
</a>
<a href="">
    <p>
        <img src="imgs/1.webp" alt="">
    </p>
    文本二
</a>

这样的代码就可以实现，让选择器选中img标签的祖先元素a标签，然后去更改其样式。 除了以上的这些选择器的配合使用，还有很多可以一起配合起来使用的选择器，就留给大家去挖掘了例如：复杂选择器、其他伪类混用等...。那么接下来就来看一个实例。

完整代码和效果点击此处查看

接下来就对这个实例进行讲解：

1. 首先来看一下效果图

2. 主要代码解读

.box1:hover~div {
    background: rgba(0, 0, 0, .5);
}
.box:has(.box2:hover) > div:not(.box2) {
    background: rgba(0, 0, 0, .5);
}
.box:has(.box3:hover) > div:not(.box3) {
    background: rgba(0, 0, 0, .5);
}
.box:has(.box4:hover) > div:not(.box4) {
    background: rgba(0, 0, 0, .5);
}
.box:has(.box5:hover) > div:not(.box5) {
    background: rgba(0, 0, 0, .5);
}

这部分代码是整个效果的核心代码，主要思路就是通过has选择器去选中当前hover的标签的父级元素，然后在通过父级元素选中除了当前标签的其他标签元素然后让其他标签的背景颜色做出改变，这就是这个效果的思路。使用了排除法的思路，大家如果没有理解，可以在评论区提出，或者是私信我，都是可以的！！！

温馨提示

看代码的时候请静心研读，逐步跟着我给的思路，希望这篇文章对你有一定的帮助，这也是我的初衷，有什么不清楚的地方随时私信我，看到会及时回复的。

四、结语

那么接下来就对本次知识做一下总结，has伪类选择器灵活度较高，可以搭配子代选择器、后代选择器、兄弟选择器以及复杂选择器等选择器实现有趣的效果，对实际开发也有一定的帮助，可以作为优化代码结构的一个好方法，推荐使用。

感谢大家的耐心阅读，希望这篇文章能给您带来一些启发和帮助。如果您有任何疑问或建议，请随时在评论区留言，我会尽快回复。