基本用法::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 选择器后选择的对象变了而已。
浏览器 | 最低版本 |
---|---|
Chrome | 105 |
Edge | 105 |
Safari | 15.4 |
Opera | 91 |