css3結構類選擇器

2021-10-03 08:21:35 字數 1351 閱讀 6484

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普遍存在相容性問題,為了避免因相容性帶來的干擾...