偽類選擇器 E:nth-child(n)、E:nth-of-type(n)


結構偽類是css3新增的類型選擇器。 E:nth-child(n)、E:nth-of-type(n)就是其中之二。搞懂了這兩個,基本上跟他倆一家的其他幾個兄弟伙基本上也可以弄懂了。

首先先用文字語言來描述一下這倆:

     E:nth-child(n): 選擇父元素下的第n個子元素,並且這第n個子元素的類型為E,

   還是語言描述了之后用例子比較好 

    

 上面這個例子很簡單,來簡單分析一下樣式表中的span:nth-child(2)這條語句(實際寫代碼不會這么隨便啦,這里只是為了說明問題):首先在父元素中去找到第二個元素,父div的第二個元素是p,顯然與span不符合,pass掉!再看父p中的第二個元素剛好是span,符合條件,就將樣式background-color顯示出來了。(ps:不知道我這樣講有沒有講明白...?)

E:nth-of-type(n) :

 選擇父元素中的E類型的元素,且是第n個。就是說先去找到父元素中子元素類型為E的,然后把它們單獨拿出來進行排序,順着數數為n的那個子元素就是我們篩選出來的

上面那個例子就可以很好的表達我用文字描述的意思。同樣的都是選取父元素中的第二個子元素,結果卻是不一樣的。簡單的說兩個偽類選擇器的差別就在於此:E:nth-of-type(n)只選類型為E的子元素,匹配類型之后我再看是第幾個;而E:nth-child(n)是不分類型的先選取第n個子元素,然后再看是否是類型為E)

 

感覺我的表達能力還需要提升啊!!!這么簡陋的表達語言,願君明了啊....哈哈。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM