css3新增的選擇器

css3新增的選擇器

1.1. css3中的結構性僞類選擇器
選擇器
功能
E:first-child
匹配第一個子元素
E:last-child
匹配最後一個子元素
E:nth-last-child(n)
匹配倒數第n個子元素
E:nth-child(n)
匹配第n個子元素
E:nth-child(2n)或
E:nth-child(even)
匹配偶數的子元素 如：二、四、6...
E:nth-child(2n+1)
E:nth-child(odd)
匹配奇數的子元素 如：一、三、5...
E:only-child
匹配有且只有一個子元素 (獨生子女)

樣式:

html結構:

效果圖:

1.2. css3中的僞元素選擇器
選擇器
功能
:first-letter
爲某個元素的第一行文字使用樣式
:first-line
爲某個元素中的文字的首字母或第一個字使用樣式
::before
在某個元素以前插入一些內容
::after
在某個元素以後插入一些內容

1.3. hover選擇器
E:hover選擇器
鼠標移動到E元素上後觸發

1.4. hover小案例:隔行變色

html代碼:

css代碼:

更多技術資訊可關注：gzitcast