?: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;
}

瀏覽器兼容性

提示：在舊版瀏覽器中需使用 JavaScript 實現類似邏輯。

?

注意事項

1. 性能優化
   避免在大型DOM樹中使用復雜?:has()?選擇器，可能影響渲染性能。

2. 作用域限制
   不能用于匹配偽元素（如?::before）。

3. 組合優先級
   選擇器優先級由?:has()?內部的選擇器決定：

/* 優先級等效于 div.foo:has(...) */
div:has(.foo) { ... }

?

總結：?

?????:has()?徹底改變了 CSS 的選擇器能力，使開發者能夠基于子元素狀態動態控制父元素樣式，大幅減少對 JavaScript 的依賴，標志著 CSS 在現代 Web 開發中的重大進步。