还在对first-child 、last-child、nth-child(n)、nth-last-child(n) 傻傻搞不清？仔细看看吧。
首先这几个选择器，都是要用 标签名称 加 冒号 才有效果的， 不可以用class的值 加冒号来使用, 例如 p:first-child{} div:last-child{} 是有效的，
对于如下代码：
<body><div class="abc"><div>123</div><div>456</div></div><div class="xyz"><div>789</div><div>zzz</div></div></body>
.abc:first-child{} 这种写法是无效的，冒号前面必须是 标签名称，
但是 .abc div:first-child{} 这个是可以的， 满足冒号前面是 标签名，
.abc 只是限定了 仅仅对 .abc范围内的div起作用， 不加.abc就是对body内所有div有效
一，first-child
1.1 div:first-child{}
表示对body内所有div而言，只要某个div相对于它的父元素来说是第一个子节点且是div即可被选中，代码如下：
<head><style>div{border: 1px solid black;width: 100px;margin: 10px;}div:first-child{border: 1px solid red;}</style></head><body><div class="abc"><div>123</div><div>456</div></div><div class="xyz"><div>789</div><div>zzz</div></div></body>
运行效果如下：
即<div class="abc"> 、 <div>123</div> 以及<div>789</div> 这3个div都会被选中,
对于abc这个div而言，它的父元素是body，而abc正好是body的第一个子元素，因此满足，
而xyz是body的第二个子元素则不满足；
对于123这个div而言，它的父元素是abc，而123正好是abc的第一个子元素，因此满足，
而456是abc的第二个子元素则不满足；
同理对于789这个div而言，它的父元素是xyz，而789正好是xyz的第一个子元素，因此满足，
而zzz是xyz的第二个子元素则不满足
1.2 ，如果改为.abc div:first-child{}，
效果如下：
因为已经限定 只作用于 .abc内的div,而.abc 内部的第一个div就是123；
当有多级子元素，如何只选中第一级子元素？
比如123的内部还有两个div, 代码如下，怎样只选中123这一级，而不选中123内部的div?
<head><style>div{border: 1px solid black;width: 100px;margin: 10px;}div:first-child{border: 1px solid red;}</style></head><body><div class="abc"><div>123<div>123的内部1</div><div>123的内部2</div></div><div>456</div></div><div class="xyz"><div>789</div><div>zzz</div></div></body>
应使用 .abc > div:first-child {} , 重点就是这个大于号，大于号表示只选下一级，而不选下一级中的子集
1.3 如果第一个元素不是div元素呢？
比如在abc的上面再加一个p标签，如下：
<head><style>div{border: 1px solid black;width: 100px;margin: 10px;}div:first-child{border: 1px solid red;}</style></head><body><p>我是body的第一个元素，但我不是div</p><div class="abc"><div>123</div><div>456</div></div><div class="xyz"><div>789</div><div>zzz</div></div></body>
效果如下：
由于body的第一个元素是p而不是div，因此abc这个div并未被选中，只选中了123和789，因为他们相对于各自的父元素来说是第一个子元素而且标签名是div
二，last-child
2.1 div:last-child{}
表示对body内所有div而言， 只要某个div相对于它的父元素来说是最后一个子元素且是div即可被选中。
<head><style>div{border: 1px solid black;width: 100px;margin: 10px;}div:last-child{border: 1px solid red;}</style></head><body><div class="abc"><div>123</div><div>456</div></div><div class="xyz"><div>789</div><div>zzz</div></div></body>
效果如下：
456是abc的最后一个子元素且标签名是div， xyz是body的最后一个子元素且标签名是div，zzz是xyz的最后一个子元素且标签名是div
2.2, .abc div:last-child{}
只作用于abc内部；
三，nth-child(n) 和nth-last-child(n)
是为了弥补 firtst-child 和 last-child 的局限性，因为他们只能针对第一个元素 和 最后一个元素，如果我想针对第二个元素怎么办？针对第三个元素怎么办？针对第四个元素怎么办.......
所以搞出了这个nth-child(n) 和 nth-last-child(n),
nth-child(n)表示从前往后数，第n个元素；
nth-last-child(n) 表示从后往前数，第n个元素；
① n 可以写成一个数字， 如
div:nth-child(1) {} 表示从前往后数的第一个子元素, 也就等同于 div:first-child{}
div:nth-child(2) {} 表示从前往后数的第二个子元素，
div:nth-last-child(2){} 表示从后往前数的第二个元素；
② n 可以写成 odd 或者 even
odd 是奇数 ，even是偶数
div:nth-first(odd){} 表示从前往后数，顺序排在基数位上的元素, 即第1,3,5,7,9...... 的元素;
div:nth-first(even) {} 表示从前往后数，顺序排在偶数位上的元素, 即第2,4,6,8,10...... 的元素;
div:nth-last-child(even)()表示从后往前数，顺序排在偶数位上的元素,;
③ n可以写成 2n, 3n ， 2n+1 这种形式：
div:nth-child(2n) {} 表示从前往后数, 2的倍数的元素，即第2,4,6,8,10...... 的元素;
div:nth-child(3n) {} 表示从前往后数, 3的倍数的元素，即第3,6,9,12 ...... 的元素, 比如写九宫格时，每行3个元素， 给每个元素设置一个margin-right, 但是第3列的元素要消除margin-right, 就可以针对3的倍数进行选中;
div:nth-last-child(3n) {} 表示从前往后数, 3的倍数的元素;
