8.1.2 CSS3选择器 —— 结构性伪类

1.1 E:nth-child(n)：表示E父元素的第n个子节点

　　p:nth-child(odd){ background: red }　　/* 匹配奇数行 */

　　p:nth-child(even){ background: red }　　/* 匹配偶数行 */

　　p:nth-child(2n){ background: red }　　　/* 自定义行数 */

1.2 E:nth-last-child(n)：表示E父元素的第n个子节点，从后向前计算

2.1 E:nth-of-type(n)：表示E父元素中的第n个子节点，且类型为E

2.2 E:nth-last-of-type(n)：表示E父元素中的第n个子节点，且类型为E，从后向前计算

3. E:empty表示E元素中没有子节点。注意：子节点包含文本节点

4.1 E:first-child：表示E元素中的第一个子节点

4.2 E:last-child：表示E元素中的最后一个子节点

4.3 E:first-of-type：表示E父元素中的第一个子节点且节点类型是E的

4.4 E:last-of-type：表示E父元素中的最后一个子节点且节点类型是E的

5.1 E:only-child：表示E元素中只有一个子节点。注意

5.2 E:only-of-type：表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

兼容：IE9+、FF3.5+、Opera9.6+、safari3.1+、chrome 1.0x+

:first-child == :nth-child(1)

:last-child == :nth-last-child(1)

:first-of-type == nth-of-type(1)

:last-of-type == nth-last-of-type(1)

问：E:nth-child(2)和E:nth-of-type(2)区别？

p:nth-child(2)：找p标签父级下的第二个子元素，并且这个元素还得是p标签

p:nth-of-type(2)：找p标签父级下的第二个p元素