场景举例:当子元素有增加了一个class时,需要影响其父元素的样式
可以使用":has"伪类来实现选择父元素的效果
<style>
.parent:has(.child){
background-color: #eee;
}
p{
width:100px;
border:1px solid #000;
}
</style>
<body>
<div class="parent">
<p class="">测试效果</p>
</div>
</body>
<style>
.parent:has(.child){
background-color: #eee;
}
p{
width:100px;
border:1px solid #000;
}
</style>
<body>
<div class="parent">
<p class="child">测试效果</p>
</div>
</body>
可以看到,当p元素拥有child类时,父元素的样式发生了改变