父级选择器

长念阅读约 2 分钟3 年前发布2 年前编辑

© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0

基本用法

:has() 伪类选择器可以实现父级选择，但它不仅仅是父级选择器。

选择父级元素

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

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

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

与普通父子选择器比较：写法上都是父级在前，子级在后，但选择的方向不同 (向父级选择)。

/* 选择的是 p 元素 */
span p {
  border: none;
}

/* 选择的是 .child 元素 */
.parent .child {
  border: none;
}

选择兄弟元素

/* 选择紧挨着 p 元素的前一个元素 span */
span:has(+ p) {
  border: none;
}

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

与普通兄弟选择器比较：选择的方向不同（向前级选择）。

/* 选择的是 span 元素后面一个 p */
span + p {
  border: none;
}

/* 选择的是 span 元素后面所有 p */
span ~ p {
  border: none;
}

/* 选择的是 p 元素后面一个 span */
p + span {
  border: none;
}

/* 选择的是 p 元素后面所有 span */
p ~ span {
  border: none;
}

速记

简单总结来说，其实写法上元素的相对位置关系并没有改变，依旧是 父级元素在前，子级元素在后 或者 兄元素在前，弟元素在后，只不过 has 选择器选择的对象变了。

浏览器支持

目前，PC 端浏览器 (除 IE 外) 都已经支持该特性，具体支持情况如下 (在 CanIUse 中查看) ：

Chrome	Edge	Firefox	Opera	Safari
105	105	103	91	15.4

Firefox 默认不支持，可以通过设置 layout.css.has-selector.enabled 开启。