場景舉例:當子元素有增加了一個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類時,父元素的樣式發生了改變