css3隔行变色

div:nth-of-type(odd){background:#fff}  /*奇数行*/

div:nth-of-type(even){background:#000}   /*偶数行 */

div:nth-child(4n+1){background:#fff}  /*从第一行开始算起 每隔四个（包含第四个）使用此样式*/

div:nth-child(4n+2){background:#fff}  /*从第二行开始算起 每隔四个（包含第四个）使用此样式*/

<strong>E:nth-child(n)</strong>

找出E元素,且它是你北朝鲜绵第n个子元素.n可以是数字(1,2,3),关键字(odd,even),公式(2n,2n+3),数字是从1开始的,不是0.如:

tr:nth-child(3)匹配所有表格里第3行的tr

tr:nth-child(2n+1)匹配所有表格的奇数行

tr:nth-child(2n)匹配所有的偶数行

tr:nth-child(odd)匹配所有的奇数行

tr:nth-child(even)匹配所有的偶数行

<strong>E:nth-last-child(n)</strong>

选择E元素,且它是父元素的倒数第n个子元素

<strong>E:nth-of-type(n)</strong>

选择E元素,且它是父元素所有子元素中类型为E的子元素集合中的第n个,n可以是数字(1,2,3),关键字(odd,even),公式(2n,2n+3),数字是从1开始的,不是0.如p:nth-of-type(2)匹配出,&lt;div&gt;&lt;h1&gt;&lt;/h1&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;中第二个p元素

<strong>E:nth-last-of-type(n)</strong>

选择E元素,且它是父元素的倒数第n个子节点

<strong>E:last-child</strong>

找出E元素,且它是父元素中的最后一个字节点

<strong>E:first-of-tpe</strong>

找出E元素,且它是父元素中是第一个该类型的元素,如p:first-of-type匹配&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;中的第一个p元素.

<strong>E:last-of-type</strong>

找出E元素,且它是父元素中的最后一个该类型的元素.如:p:last-of-type匹配,&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;中的最后一个p元素,它同E:nth-last-of-tpe(1)意义相同

<strong>E:only-child</strong>

找出父元素中只包括一个的子元素,且该元素是E

<strong>E:only-of-type</strong>

选择其父元素只包含一个同类型的子元素,且该子元素匹配E.如p:only-of-type匹配&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;中的p,因为div中只包括一个p元素

<strong>E:empty</strong>

匹配E元素,且该元素不包含子节点,注意,文字也属于节点