基本用法::has() 偽類選擇器可以實(shí)現(xiàn)父級(jí)選擇,但它不僅僅是父級(jí)選擇器。
/* 選擇子元素中包含 p 元素的 span */ span:has(p){ border: none; } /* 選擇子元素中包含 .child 元素的 .parent */ .parent:has(.child){ border: none; } /* 選擇直接子元素中包含 .child 元素的 .parent */ .parent:has(> .child){ border: none; }
與普通父子選擇器比較:寫法上都是父級(jí)在前,子級(jí)在后,但選擇的方向不同(向父級(jí)選擇)
span p { border: none; } /* 選擇的是 p 元素 */ .parent .child { border: none; } /* 選擇的是 .child 元素 */
/* 選擇緊挨著 p 元素的前一個(gè)元素 span */ span:has(+ p) { border: none; } /* 選擇 p 元素前面的所有兄弟 span 元素 */ span:has(~ p) { border: none; }
與普通兄弟選擇器比較:選擇的方向不同(向前級(jí)選擇)
span + p { border: none; } /* 選擇的是 span 元素后面一個(gè) p */ span ~ p { border: none; } /* 選擇的是 span 元素后面所有 p */ p + span { border: none; } /* 選擇的是 p 元素后面一個(gè) span */ p ~ span { border: none; } /* 選擇的是 p 元素后面所有 span */
簡(jiǎn)單總結(jié)來(lái)說(shuō),其實(shí)寫法上元素的相對(duì)關(guān)系并沒(méi)有改變,依舊是父級(jí)元素在前,子級(jí)元素在后,或者前兄弟元素在前,后兄弟元素在后,只不過(guò)使用 has 選擇器后選擇的對(duì)象變了而已。
瀏覽器 | 最低版本 |
---|---|
Chrome | 105 |
Edge | 105 |
Safari | 15.4 |
Opera | 91 |