CSS子元素選擇父元素的實現(xiàn)

發(fā)布時間：2020-09-01 16:33:58 作者：風(fēng)輕云淡180518

這篇文章主要介紹了CSS子元素選擇父元素的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

<ul>
    <li>
        <a href="#" class="active">1</a>
    </li>
    <li>
        <a href="#">2</a>
    </li>
</ul>

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

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

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

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

表示選擇 <div> 標簽，前提是這個div標簽必須是被一個<p>緊跟著的。此外還可以與:not 一起使用

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

表示不包含 <a> 的 <article>標簽。注意這里 :not 和 :has 的先后順序，不同順序代表不同的意思

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

表示包含非 <a> 的 <article>標簽

其實我們前面講過的 :focus-within 也是一個通過子元素選擇父元素的偽類，只不過條件只能是子元素是否獲取焦點，而 :has 則更靈活和強大。

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

如果通過 :has 實現(xiàn)的話，可以這樣寫

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

到此這篇關(guān)于CSS子元素選擇父元素的實現(xiàn)的文章就介紹到這了,更多相關(guān)CSS子元素選擇父元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片