css選中父元素下的第乙個子元素

2021-10-23 02:01:36 字數 1252 閱讀 1107

最近在專案中用到:first-child很容易的就想到了,嗯嗯。這不就是選擇第乙個元素嗎?

好像很好用,平時使用中也沒有遇到什麼問題,理所當然的就以為它只會選中父元素下的第乙個元素,對孫元素和曾孫元素沒有影響。事實證明,我的理所當然是錯的。

>

>

>

body p:first-child

style

>

head

>

>

>

這個段落是其父元素(body)的首個子元素。p

>

>

>

>

這個段落不是其父元素的首個子元素。p

>

>

>

這個段落是其父元素(div)的首個子元素。p

>

>

這個段落不是其父元素的首個子元素。p

>

div>

>

>

注釋:b

>

對於 ie8 及更早版本的瀏覽器中的 :first-child,必須宣告 。

body

>

html

>

上面的**真的是只會有乙個p標籤生效嗎?

這是後就已經犯了我們常見的第乙個誤區,認為body p:first-child選中的就是第乙個元素。

其實,只要在我們選中的body這一塊中,如果這個p在其父元素中屬於第乙個,那它就被選中。

還是上面的**,但是我們在body中的p標籤前加了乙個font標籤,發現p已經失效了。

上面的兩個例子已經很清楚的告訴我們了這個選擇器到底應該怎麼用

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

子選擇器(>) :只能選擇作為某元素兒子元素的元素(直接子元素),不包括孫元素、曾孫元素等等等

還拿上面的**舉例,將》添上試一下效果

有時候使用錯誤的選擇器,卻沒有報錯。但錯了就是錯了。總有被發現的時候。

很慶幸這次的錯誤讓我學到了知識。

03 第乙個子節點和最後乙個子節點

lang en charset utf 8 documenttitle head box 這是乙個廣告div 這是乙個列表li ul 說明性文字span div box.firstchild 獲取第乙個子節點 box.firstelementchild 獲取第乙個子元素,有相容性問題,從ie9以後支...

03 第乙個子節點和最後乙個子節點

lang en charset utf 8 documenttitle head box 這是乙個廣告div 這是乙個列表li ul 說明性文字span div box.firstchild 獲取第乙個子節點 box.firstelementchild 獲取第乙個子元素,有相容性問題,從ie9以後支...

jquery如何獲取第乙個或最後乙個子元素?

通過children方法,children input first child 12 this children input first child val this children input last child val 通過 選擇器,items input first 在這裡轉一篇 jque...