CSS子元素選擇父元素的實(shí)現(xiàn)
我要評(píng)論通常一個(gè)CSS選擇器都是從上往下選擇的，通過(guò)父元素選擇子元素，那么能不能通過(guò)子元素選擇父元素呢？
<ul>
<li>
<a href="#" class="active">1</a>
</li>
<li>
<a href="#">2</a>
</li>
</ul>
如果我想選擇包含 a.active 的 li 該怎么實(shí)現(xiàn)呢？ 目前我們學(xué)到的CSS好像是沒(méi)有辦法的，不過(guò)今天要將的一個(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í)我們前面講過(guò)的 :focus-within 也是一個(gè)通過(guò)子元素選擇父元素的偽類，只不過(guò)條件只能是子元素是否獲取焦點(diǎn)， 而 :has 則更靈活和強(qiáng)大。
form:focus-within{
background-color:black;
}
如果通過(guò) :has 實(shí)現(xiàn)的話， 可以這樣寫(xiě)
form:has(:focus){
background-color:black;
}
到此這篇關(guān)于CSS子元素選擇父元素的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)CSS子元素選擇父元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS子元素跟父元素的高度一致的實(shí)現(xiàn)方法
這篇文章主要介紹了CSS子元素跟父元素的高度一致的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-09-02
這篇文章主要介紹了純CSS讓子元素突破父元素的寬度限制,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-09-03- 這篇文章主要介紹了詳解CSS 子元素相對(duì)于父元素固定定位解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-09-03
css選中父元素下的第一個(gè)子元素(:first-child)
這篇文章主要介紹了css選中父元素下的第一個(gè)子元素(:first-child)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2020-09-08
css通過(guò)子元素選擇父元素的實(shí)現(xiàn)示例
在CSS中無(wú)法直接根據(jù)子元素選擇父元素,因?yàn)镃SS是一種向語(yǔ)言,它只允許選擇器從父元素向子元素匹配，本文介紹了css通過(guò)子元素選擇父元素的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感2024-02-19