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