新鲜出炉的伪类：has

偶然看到阅文的技术文章，就猜到是css又整新活了，还是我之前发过的伪类的一员大将，不错不错，一起来试试看这个新来的工具人:has吧！

什么是 :has?

:has伪类的语法非常简单，表示满足一定条件后，就会匹配该元素。

小试牛刀

光说不练假把式，让我先来试一试这个:has有什么特别之处吧；

.box:has(> img)

很好，给所有包含img标签的元素都添加了样式；

效果可以实现，可是这只是一些css的基操，这个:has还有什么方便的操作呢？

拓展练习

拖拽指定区域（也是参考阅文的demo）

html:

 <div class="content">
        <div class="item">列表<span class="thumb">*</span></div>
        <div class="item">列表<span class="thumb">*</span></div>
        <div class="item">列表<span class="thumb">*</span></div>
    </div>

css:

        .thumb{
            opacity: 0;
        }
        .item{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 30px;
            border: 1px solid #333;
            margin-top: 5px;
        }
        .thumb{
            width: 30px;
            height: 30px;
            background-color: rgb(242, 220, 220);
        }
        .item:hover .thumb{
            opacity: 1;
        }

        .item:has(.thumb:hover){
            -webkit-user-drag: element;
        }

这是避免误拖拽，简单的css代码就可以达到点击指定的拖拽区域的效果；