那些年踩過的坑之 first child偽類選擇器

2021-07-31 07:54:57 字數 926 閱讀 3098

:first-child 選擇器用於選取屬於其父元素的首個子元素的指定選擇器。——w3school

嗯,乍一看好像說的不是很明白,因此這個選擇器很容易讓人誤解,通常會有兩種誤解:

誤解一:認為e:first-child選中e元素的第乙個子元素。

誤解二:認為e:first-child選中e元素的父元素的第乙個e元素。

你是不是也曾這樣理解這個選擇器或者現在仍然這樣理解?以上兩種理解都是錯誤的,為了證明上面兩種理解是錯的,看看下面的例項

乙個鏈結

乙個鏈結

乙個鏈結

乙個鏈結

效果是這樣的:

很明顯,照第一種理解,應該只有第乙個a元素字型顏色變紅,然而事實上全部變紅了。

乙個段落

乙個鏈結

乙個鏈結

乙個鏈結

乙個鏈結

效果是這樣的:

照第二種理解,div裡的第乙個a元素字型應該是紅色的,事實證明這種理解也是錯的。

ok,正確的理解應該是:只要e元素是它的父級的第乙個子元素,就選中。它需要同時滿足兩個條件,乙個是「第乙個子元素」,另乙個是「這個子元素剛好是e」。

.demo的第乙個子元素是div

第乙個span第乙個段落p第二個span

乙個鏈結第乙個i元素

乙個鏈結第二個i元素

乙個鏈結

效果:

類似容易誤解的結構選擇器還有:nth-child()、:nth-last-child、:only-child,在平時的開發中需要注意一下。

那些年之cordova踩過的坑

私人筆記 如果安裝的是crosswalk with cordova 整合版的話 新增外掛程式的方法是 需要的環境 nodejs git 1 npm安裝 plugman npm install g plugman2 cd到當前專案根目錄 cd f music3 安裝ngcordova外掛程式 這一步千...

uniapp之那些年踩過的坑

這裡我把一些坑列舉出來了?這裡有兩點 使用this.set obj key 值 或 者thi s.set obj,key,值 或者this.set ob j,ke y,值 或者th is.set array,index,值 像是處理vue底層監聽不到資料變化的解決方式 要用資料巢狀陣列,而不是物件包...

那些年踩過的CSS坑

1 img 標籤中的alt 與title的區別 title 滑鼠滑過時顯示的文字提示。對seo優化的影響 搜尋引擎對理解是通過alt屬性,所以在alt屬性中包含關鍵字的簡要文字說明,也是頁面優化的一部分。2 padding與margin區別 padding是控制項的內容相對控制項的邊緣的邊距,mar...