還記得那些時候，當您需要根據子元素設定父元素的樣式時，您最終編寫了一堆 JavaScript 只是為了添加一個簡單的類別嗎？好吧，那些日子終於過去了！ CSS :has() 偽類可以拯救世界，為世界各地的前端開發者改變遊戲規則。
將 :has() 視為您的 CSS 水晶球 – 它可以讓您查看元素內部以檢查它們包含的內容。當 div 內部有圖像時，想要以不同的方式設定其樣式嗎？就像寫 div:has(> img) 一樣簡單。不需要 JavaScript！
大多數現代瀏覽器現在都支援 :has()，儘管 Internet Explorer 使用者（如果您仍然需要支援它們）將需要後備。但不要讓這阻止你－漸進增強是你的朋友！
讓我們來談談一些曾經讓我們抓狂的常見場景。還記得這些嗎？
舊方法：
新方式：
不再有事件偵聽器或類別切換 - 只有純粹的聲明性 CSS。是不是很漂亮？
我們都經歷過這樣的情況－嘗試在選單開啟時設定下拉容器的樣式。以前，您需要 JavaScript 在 DOM 樹中上下切換類別。
舊的 JavaScript 方法：
新的 CSS 方法：
讓我們來看一些 :has() 真正發揮作用的實際例子：
希望您的畫廊根據其包含的內容類型調整其佈局？簡單易行！
您可以將 Medium 文章的連結整合到您的新文章中，將其用作參考、引用或靈感來源。以下是如何有效地包含它：
互動式表單、下拉式選單和同級狀態管理只是 CSS 現在處於領先地位的幾個例子。正如這篇富有洞察力的 Medium 文章中所指出的，像 :has() 這樣的現代技術允許 CSS 直接管理這些任務，而無需依賴 JavaScript。
選取複選框時需要突出顯示整個部分？沒問題！
想要在容器為空時顯示訊息嗎？ :has() 為你提供支持：
使用 :has() 來取代 JavaScript 的好處是：這不僅僅是為了編寫更少的程式碼。您的頁面實際上會表現得更好，因為：
雖然 :has() 很棒，但有一些事情要記住：
保持簡單
不要過度使用複雜的選擇器。僅僅因為您可以編寫 div:has(> span:has(> img)):has( p) 並不意味著您應該這樣做！
漸進增強
對於不支援 :has():
的瀏覽器，始終有一個明智的後備方案
:has() 偽類別不僅僅是一個新的 CSS 功能 - 它是我們在樣式表中處理父子關係的方式的範式轉移。它幫助我們編寫更多可維護的程式碼，提高效能，最重要的是，它讓 CSS 做 CSS 最擅長的事情：以聲明方式處理樣式。
因此，下次您使用 JavaScript 在父元素上切換類別時，請記住：使用 :has() 可能有一個更簡單、更優雅的解決方案。試試看 - 您的程式碼（和您的用戶）會感謝您！
請記住，雖然瀏覽器支援良好且越來越好，但請務必檢查 caniuse.com 以獲取最新的相容性資訊。並且不要害怕嘗試 - 這就是我們作為開發人員學習和成長的方式！
以上是:has() 偽類如何消除 CSS 中 JavaScript Hack 的需要的詳細內容。更多資訊請關注PHP中文網其他相關文章！
