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)	匹配偶数的子元素  如：2、4、6...
E:nth-child(2n+1) E:nth-child(odd)	匹配奇数的子元素  如：1、3、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代码:

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)	匹配偶数的子元素  如：2、4、6...
E:nth-child(2n+1) E:nth-child(odd)	匹配奇数的子元素  如：1、3、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代码: