?:has功能性偽類選擇器:
? ? :has()
?是 CSS 中的一個功能性偽類選擇器,它允許開發者根據元素的后代元素、兄弟元素或后續元素的存在或狀態來選擇目標元素。它本質上是一個“父選擇器”或“關系選擇器”,解決了 CSS 長期以來無法根據子元素反向選擇父元素的痛點。
核心功能與語法?:
/* 選擇包含匹配子元素的父元素 */
parent:has(childSelector) {/* 樣式規則 */
}/* 選擇包含匹配兄弟元素的元素 */
element:has(+ siblingSelector) {/* 樣式規則 */
}
關鍵特性詳解:
1.基于后代/兄弟關系選擇
- 選擇包含特定子元素的父元素:
/* 選擇所有包含 <img> 子元素的 <div> */div:has(> img) {border: 2px solid blue;
}
- 選擇包含特定兄弟元素的元素:
/* 選擇緊鄰 <h2> 的 <div> */
div:has(+ h2) {background: yellow;
}
2.支持復雜嵌套條件
可組合其他選擇器實現精細控制:
/* 選擇包含 "active" 類子按鈕的卡片 */
.card:has(> .btn.active) {box-shadow: 0 0 10px red;
}
3.鏈式調用
允許多層條件篩選:
/* 選擇包含已勾選復選框的表單 */
form:has(input[type="checkbox"]:checked) {background: lightgreen;
}
實際應用場景
1.動態表單反饋
當輸入框無效時高亮其父容器:
.form-group:has(:invalid) {border-left: 3px solid red;
}
2.響應圖片容器
為包含圖片的卡片添加特殊樣式:
article:has(figure > img) {padding: 1.5em;
}
3.交互狀態聯動
根據子元素狀態改變父元素樣式:
/* 下拉菜單展開時改變按鈕顏色 */
.dropdown:has(.menu:visible) > .dropdown-btn {background: #555;
}
瀏覽器兼容性
瀏覽器 | 支持版本 |
---|---|
Chrome | 105+ (2022年起) |
Safari | 15.4+ (2022年起) |
Firefox | 121+ (2023年起) |
Edge | 105+ |
移動端瀏覽器 | 主流版本均已支持 |
提示:在舊版瀏覽器中需使用 JavaScript 實現類似邏輯。
?
注意事項
性能優化
避免在大型DOM樹中使用復雜?:has()
?選擇器,可能影響渲染性能。作用域限制
不能用于匹配偽元素(如?::before
)。組合優先級
選擇器優先級由?:has()
?內部的選擇器決定:
/* 優先級等效于 div.foo:has(...) */
div:has(.foo) { ... }
?
總結:?
?????:has()
?徹底改變了 CSS 的選擇器能力,使開發者能夠基于子元素狀態動態控制父元素樣式,大幅減少對 JavaScript 的依賴,標志著 CSS 在現代 Web 開發中的重大進步。