CSS3中提供了一種稱為:has()的CSS偽類選擇器,它可以通過子元素選擇其父元素進行樣式控制。
.parent:has(.child) { /* ...樣式... */ }
上述代碼中,.parent:has(.child)表示選擇擁有子元素.child的父級元素.parent,從而實現控制父元素的樣式。
舉例來說,如果我們想要控制一個網頁中所有擁有列表元素的父元素的背景色,我們可以這樣寫:
ul:has(li) { background-color: #ccc; }
這會選擇包含至少一個li元素的ul元素,并將其背景色變成灰色。
此外,:has()偽類可以與其他選擇器組合使用,比如同時控制父元素和子元素的樣式:
.parent:has(.child) .grandchild { /* ...樣式... */ }
上述代碼中,.parent:has(.child) .grandchild表示選擇擁有子元素.child的父級元素.parent中的.grandchild元素。
然而,需要注意的是,:has()偽類選擇器目前在某些瀏覽器上支持較差,并且在CSS規范中并未最終確定是否保留。因此在使用時需要謹慎考慮。