偶然看到阅文的技术文章，就猜到是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代码就可以达到点击指定的拖拽区域的效果；
