CSS子元素選擇父元素
釋出時間：2018-10-09 23:21,
浏覽次數：6139
, 标簽：
CSS
通常一個CSS選擇器都是從上往下選擇的，通過父元素選擇子元素，那麼能不能通過子元素選擇父元素呢？
- 1
- 2
如果我想選擇包含 a.active 的 li 該怎麼實作呢？ 目前我們學到的CSS好像是沒有辦法的，不過今天要将的一個CSS僞類 :has()
就有這個功能，雖然還處于草案階段，但是還是可以提前了解一下。
li:has(> a.active){ color:red; }
除了表示包含，:has 還可以表示兄弟跟随關系
div:has(+ p){ color:red; }
表示選擇
标簽，前提是這個div标簽必須是被一個
緊跟着的。此外還可以與:not 一起使用
article:not(:has(a)){ color:red; }
表示不包含 的 标簽。注意這裡 :not 和 :has 的先後順序，不同順序代表不同的意思
article:has(:not(a)){ color:red; }
表示包含非 的 标簽
其實我們前面講過的 :focus-within 也是一個通過子元素選擇父元素的僞類，隻不過條件隻能是子元素是否擷取焦點， 而 :has 則更靈活和強大。
form:focus-within{ background-color:black; }
如果通過 :has 實作的話， 可以這樣寫
form:has(:focus){ background-color:black; }