css新增的选择器,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)

匹配偶数的子元素 如：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代码:

更多技术资讯可关注：gzitcast