1. 程式人生 > >css屬性選擇器關於-of-type 和-child

css屬性選擇器關於-of-type 和-child

1.only-of-type, only-child, first-of-type, last-of-type例:p:only-of-type 當p的父元素中有且僅有一個p元素時(p的父元素還是允許有其它型別的子元素的),這個p元素被選中例:p:only-child           當p  的父元素中有且僅有一個子元素,且這個子元素是p 時,這個p元素被選中例:p: first-of-type       p元素的父元素內的首個p元素被選擇例:p: last-of-type        p元素的父元素的最後一個p 元素被選擇2. nth-child(n), nth-last-child(n), nth-of-type, nth-last-of-type(n)
  1. nth-child(n)選擇器將會匹配屬於其父元素的第n個子元素,無論元素的型別,n可以是數字,關鍵詞和公式(第一個子元素的下標是1,關鍵字例"odd"表示奇數,"even"表示偶數,公式例“(a*n+b)(a, b 均為常數,n是計數器,編譯後n自動從0開始逐一遞增)”)
       例:p:nth-child(2) 當p元素的父元素的所有型別的子元素中的第二個子元素是p元素,這個p元素將會被選中,否則,沒           有任何東西會被選中       nth-last-child(n)同上,區別是它是從下往上匹配;      2.nth-of-type(n)選擇器將會匹配屬於其父元素的特定型別(冒號前面表示的元素)的第n個子元素        例:p:nth-of-type(2) 當p元素的父元素中的所有p元素中的第二個p元素
會被選中           nth-last-of-type(n)同上,區別是它是從下往上匹配;