nth-child的妙用

• tr:nth-child(2n+1)

• 表示HTML表格中的奇数行。

• tr:nth-child(odd)

• 表示HTML表格中的奇数行。

• tr:nth-child(2n)

• 表示HTML表格中的偶数行。

• tr:nth-child(even)

• 表示HTML表格中的偶数行。

• span:nth-child(0n+1)

• 表示子元素中第一个且为span的元素，与 :first-child 选择器作用相同。

• span:nth-child(1)

• 表示父元素中子元素为第一的并且名字为span的标签被选中

• span:nth-child(-n+3)

• 匹配前三个子元素中的span元素。

.first span:nth-child(2n+1),.second span:nth-child(2n+1),.third span:nth-of-type(2n+1) {
  background-color: lime;}

nth-child和nth-of-type的区别

.class:nth-child(2)   代表这个父元素下第2个class元素

.class:nth-of-type(2)   代表这个父元素下第2个元素

例：

<ul class="demo">

    <p>1</p>

    <li>2</li>    

    <li>3</li>    

    <li>4</li>

</ul>

.demo li:nth-child(2)    选中的是<li>2</li>这个节点，因为nth-child可以选择所有的子元素

.demo li:nth-of-type(2)    选中的是<li>3</li>这个节点，因为nth-of-type只能选择同样元素