css3之nth-child和nth-of-type

nth-child

p:nth-child(n){//表示p的父元素下的第n个子元素}

nth-of-type

p:nth-of-type(n){//表示p的父元素下的第n个子元素且这个子元素是p}

举例：nth-of-type

<p>1</p><p>2</p><span>3</span><p>4</p><p>5</p>p:nth-of-type(odd){    background:red;//表示第奇数个p元素，即内容为1，4}p:nth-of-type(even){    background:green;//表示第偶数个p元素，即内容为2，5}

显示结果如下：

举例：nth-child

<p>1</p><p>2</p><span>3</span><p>4</p><p>5</p>p:nth-child(odd){    background:red;//表示第奇数个子元素，且子元素为p,即内容为1，5}p:nth-child(even){    background:green;//表示第偶数个子元素，且子元素为p,即内容为2，4}

显示结果如下：