: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...