基本用法：:has() 偽類選擇器可以實現父級選擇，但它不僅僅是父級選擇器。

選擇父級元素

/* 選擇子元素中包含 p 元素的 span */
span:has(p){ border: none; }

/* 選擇子元素中包含 .child 元素的 .parent */
.parent:has(.child){ border: none; }

/* 選擇直接子元素中包含 .child 元素的 .parent */
.parent:has(> .child){ border: none; }

與普通父子選擇器比較：寫法上都是父級在前，子級在后，但選擇的方向不同(向父級選擇)

span p { border: none; } /* 選擇的是 p 元素 */
.parent .child { border: none; } /* 選擇的是 .child 元素 */

選擇兄弟元素

/* 選擇緊挨著 p 元素的前一個元素 span */
span:has(+ p) { border: none; }

/* 選擇 p 元素前面的所有兄弟 span 元素 */
span:has(~ p) { border: none; }

與普通兄弟選擇器比較：選擇的方向不同（向前級選擇）

span + p { border: none; } /* 選擇的是 span 元素后面一個 p */
span ～ p { border: none; } /* 選擇的是 span 元素后面所有 p */

p + span { border: none; } /* 選擇的是 p 元素后面一個 span */
p ～ span { border: none; } /* 選擇的是 p 元素后面所有 span */

簡單總結來說，其實寫法上元素的相對關系并沒有改變，依舊是父級元素在前，子級元素在后，或者前兄弟元素在前，后兄弟元素在后，只不過使用 has 選擇器后選擇的對象變了而已。

瀏覽器兼容性