這篇“CSS子元素選擇父元素的示例分析”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“CSS子元素選擇父元素的示例分析”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
通常一個CSS選擇器都是從上往下選擇的，通過父元素選擇子元素，那么能不能通過子元素選擇父元素呢？
<ul> <li> <a href="#" class="active">1</a> </li> <li> <a href="#">2</a> </li> </ul>
如果我想選擇包含 a.active 的 li 該怎么實現呢？ 目前我們學到的CSS好像是沒有辦法的，不過今天要將的一個CSS偽類 :has() 就有這個功能，雖然還處于草案階段，但是還是可以提前了解一下。
li:has(> a.active){
color:red;
}除了表示包含，:has 還可以表示兄弟跟隨關系
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 實現的話， 可以這樣寫
form:has(:focus){
background-color:black;
}以上是“CSS子元素選擇父元素的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
