CSS子元素選擇父元素的示例分析-創(chuàng)新互聯(lián)

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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請域名、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、昂仁網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

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

如果我想選擇包含 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;
}

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

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

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

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

表示包含非 <a> 的 <article>標(biāo)簽

其實(shí)我們前面講過的 :focus-within 也是一個(gè)通過子元素選擇父元素的偽類，只不過條件只能是子元素是否獲取焦點(diǎn)， 而 :has 則更靈活和強(qiáng)大。

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

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

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

以上是“CSS子元素選擇父元素的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：CSS子元素選擇父元素的示例分析-創(chuàng)新互聯(lián)
URL地址：http://muchs.cn/article14/ddsjde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、Google、外貿(mào)建站、建站公司、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)