学习css 伪类:has

学习抖音： @渡一前端提薪课

首先我们看下:has(selector)是什么

匹配包含（相对于 selector 的 :scope）指定选择器的元素。可以认为 selector 的前面有一个看不见的 :scope 伪类。它的强大之处是，可以实现父选择器和前面兄弟选择器的功能。支持所有的 CSS 选择符。

我们举个例子：

css

  .box1:has(p) {
    color: red;
}
        
.box1:has(span) {
    color: blue;
}
.box1:has(a, div) {
    color: greenyellow;
}

html

    

        
ppp
    
    

        span
    
    

        有p
    
    

        
有div
    

结果，.box1:has(p) 就是包含 p 标签的.box1 元素。.box1:has(span)就是包含span的元素，.box1:has(a, div) 就是 包换 a 和包含div的元素

进阶

知道这个原理后我们在进阶一下，看看 子的伪类可不可以用。

css

.box1:has(.red:hover) {
    color: red;
}
.box1:has(.blue:hover) {
    color: blue;
}
.box1:has(.yellow:hover) {
    color: yellow;
}

html

    
变红色
    
变蓝色
    
变黄色

结果：

基于这个特效 我们做一个案例

案例

直接上代码

效果：