CSS父级选择器 :has()

---

基本用法

: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 选择器后选择的对象变了而已。

---

浏览器支持

目前 2022-10-13，PC 端浏览器支持情况如下：

浏览器	最低版本
Chrome	105
Edge	105
Safari	15.4
Opera	91

除 IE 外，主流浏览器仅 Firefox 还未做出支持。