国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > 使用CSS查找父元素

使用CSS查找父元素

來源:千鋒教育
發(fā)布人:syq
時(shí)間: 2022-09-21 14:45:01 1663742701

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

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

使用CSS查找父元素

  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

15

  一行代碼?讓我們嘗試使用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

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
什么是域控制器?

一、域控制器的定義域控制器是指在Windows Server操作系統(tǒng)中部署Active Directory服務(wù)的服務(wù)器。Active Directory是微軟公司開發(fā)的目錄服務(wù),用...詳情>>

2023-10-15 00:10:28
深度學(xué)習(xí)模型權(quán)重h5、weights、ckpt、pth有什么區(qū)別?

1.來源框架不同h5格式通常用于Keras和TensorFlow框架,weights用于Darknet框架,ckpt是TensorFlow框架的一種格式,而pth則主要用于PyTorch框架...詳情>>

2023-10-15 00:05:17
大數(shù)據(jù)測(cè)試工程師需要具備哪些技能?

一、理解大數(shù)據(jù)概念大數(shù)據(jù)測(cè)試工程師需要理解大數(shù)據(jù)的基本概念和原理,如分布式存儲(chǔ)、MapReduce、實(shí)時(shí)計(jì)算等。他們還需要了解如何處理大規(guī)模的...詳情>>

2023-10-14 23:43:03
為什么SpringBoot的 jar 可以直接運(yùn)行?

一、JAR文件的結(jié)構(gòu)與執(zhí)行方式Spring Boot的JAR包是Java Archive的縮寫,它是一種壓縮文件格式,可以將Java項(xiàng)目的類文件、資源文件以及依賴庫(kù)等...詳情>>

2023-10-14 23:01:49
站群服務(wù)器是什么?

站群服務(wù)器的含義與用途站群服務(wù)器主要用于支持站群,即由一組相互鏈接的網(wǎng)站組成的群體。這些網(wǎng)站通常由同一組織或個(gè)人擁有,并且經(jīng)常會(huì)互相鏈...詳情>>

2023-10-14 22:46:12
快速通道