CSS '： 添加了一個自定義邏輯，以基于其他選擇器(而不是其自己的選擇器)查找元素。has'

　　我不得不承認(rèn)，最強大的機器之一是CSS引擎，但有時很難只使用CSS來做某些事情，即使只是為了改變一些顏色。例如，如果我要求你從CSS中的子元素中找到一個父元素，通常你會被卡住。

　　CSS是以某種方式設(shè)計的，給定一個元素，你可以指定其子級的視覺屬性。因此，它或多或少是從自上而下的方法設(shè)計的，就像HTML DOM樹一樣。首先從元素作為根開始，然后通過選擇器深入挖掘其分支和葉子。

　　腳本

　　我是一名JavaScript開發(fā)人員，所以過去當(dāng)這些問題出現(xiàn)時，我只需要寫幾行JS代碼，例如：

　　Document.getElementById('root')

　　有時版本更復(fù)雜，但或多或少我可以找到元素，即使它在其中一個DOM分支中很遠(yuǎn)。這里沒有什么新鮮事，我們已經(jīng)這樣做了將近二十年。但坦率地說，JavaScript很重。如果我不必這樣做，我盡量不要在JavaScript中這樣做。沒錯，我是一名JavaScript開發(fā)人員，但現(xiàn)在我把CSS作為我解決UI問題的第一個工具，僅僅是因為它更便宜。

　　斷續(xù)器

　　信不信由你，CSS每天都在添加新功能。我們覺得它變化很快的原因是沒有人跟蹤CSS規(guī)范，更不用說所有這些瀏覽器兼容性了。似乎為我們打開了與父節(jié)點相關(guān)的大門的功能之一稱為 。如果您還不知道視頻，可以觀看。我會等你回來的。:has

　　我們不是直接找到一個元素，而是通過詢問它是否具有或包含另一個選擇器來查找它。讓我們回顧一下選擇器：

　　a img {}

　　上面的選擇器要求內(nèi)部.這很容易，但這也是為什么我們找不到父母的原因，因為我們對不感興趣，好吧，我們真正想做的是：imgaimg

　　a:has(img) {}

　　啊，如果包含一個，那么這就是我們想要找到的。就是這樣?你可能會說。是的，這真的使不可能成為可能。aimga

　　正文：有()

　　很多時候，當(dāng)我制作一個網(wǎng)站時，我想在彈出一個模態(tài)時改變風(fēng)格?，F(xiàn)在在我看來，我只需要執(zhí)行以下操作：body

　　一行代碼?讓我們嘗試使用JavaScript完成上述操作，祝您好運。此外，如果您可以在前端框架中將JavaScript版本與少于五行代碼集成。

　　所以現(xiàn)在的問題不再是找到父級，而是改變它以找到具有某些東西的節(jié)點。在某種程度上，這為需要找到一個遙遠(yuǎn)的元素的問題提供了另一條途徑。最重要的是，我們可以立即對發(fā)現(xiàn)的元素進(jìn)行操作。

　　CSS 添加了一個自定義邏輯，用于基于其他選擇器(而不是自己的選擇器)查找元素。這將使從現(xiàn)在開始找到父節(jié)點的不可能的任務(wù)成為可能。:has