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

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

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

　　腳本

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

　　Document.getElementById('root')

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

　　斷續(xù)器

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

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

　　a img {}

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

　　a:has(img) {}

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

　　正文：有()

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

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

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

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