1、我們把css3裡的:nth選擇器稱之為:css3結構類
2、:first-child :last-child :nth-child(n) :nth-last-child
3、:nth-of-type :nth-last-of-type :first-of-type :last-of-type
4、:only-child :only-of-type :empty
:first-child
1、選擇屬於其父元素的首個子元素的每個element元素
last-child
1、屬於父元素的最後乙個子元素的每個element元素
:nth-child(n)
1、匹配屬於其父元素的第n個子元素,不論元素型別
2、關於引數(n)
1.number – 選擇某元素下的第number個element元素 1 2 3 4.。。
2.n(從0開始) 乙個簡單的表示式 2n 2n+1 2n-1 odd奇數 even偶數
:nth-last-child(n)
1、匹配屬於其父元素的第n個子元素,不論元素的型別,從最後乙個開始計算
:nth-of-type()
1、匹配屬於父元素的特定型別第n個子元素的每個元素
:nth-last-of-type(n)
匹配屬於父元素的特定型別第n個子元素的每個元素,從最後乙個子元素開始計算
區別:type 指定元素型別
child 不限制元素型別
:first-of-type
1、匹配屬於父元素的特定型別第n個子元素的首個子元素的每個元素
:last-of-type
1、匹配屬於父元素的特定型別第n個子元素的最後乙個子元素的每個元素
:only-child
1、匹配父元素的唯一子元素的每個元素
:only-of-type
1、匹配屬於父元素的特定型別的唯一子元素的每個元素
empty
1、匹配沒有子元素(包括文字節點)的每個子元素
以上基本就是css3新增的nth型別選擇器的核心部分!
否定選擇器(:not)
1、選擇器匹配非指定元素/選擇器的每個元素 – 表示除了這個元素,其他都可以選中
2、父元素:not(子元素/子選擇器)
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
CSS3 結構偽類選擇器
選擇器作用 first child 匹配子集的第乙個元素 last child 匹配子集的最後乙個元素 nth child n 根據索引n匹配值 nth last child n 根據索引n匹配值,索引從最後乙個開始數 nth of type n 根據標籤type和索引n匹配值 nth last o...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。比如說,同樣是乙個頭像,可能在低版本的瀏覽器中,頭像方的 在高版本的瀏覽器中,頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題,為了避免因相容性帶來的干擾...