這篇“CSS子元素選擇父元素的示例分析”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“CSS子元素選擇父元素的示例分析”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

通常一個(gè)CSS選擇器都是從上往下選擇的，通過父元素選擇子元素，那么能不能通過子元素選擇父元素呢？

    

        1
    
    

        2
    

如果我想選擇包含 a.active 的 li 該怎么實(shí)現(xiàn)呢？ 目前我們學(xué)到的CSS好像是沒有辦法的，不過今天要將的一個(gè)CSS偽類 :has() 就有這個(gè)功能，雖然還處于草案階段，但是還是可以提前了解一下。

li:has(> a.active){
    color:red;
}

除了表示包含，:has 還可以表示兄弟跟隨關(guān)系

div:has(+ p){
    color:red;
}

表示選擇

article:not(:has(a)){
    color:red;
}

article:has(:not(a)){
    color:red;
}

form:focus-within{
    background-color:black;
}

form:has(:focus){
    background-color:black;
}