css3伪类选择符

1.1 伪类选择符

2.1 li:first-child

匹配父元素的第一个子元素E

<style>
	ul li:first-child{
  		background:red;
	}
	ul li:last-child{
  		background:red;
	}
</style>
<ul>
	<li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
</ul>
/*选择到了ul标签下的第一个li标签*/
/*选择到了ul标签下的最后一个li标签*/

3.1 li:nth-child(n) li:nth-last-child(n)

匹配到父元素的第n个元素或者是倒数第n个元素

相比li:first-child则要强大了不少，功能如下(死记硬背是最好的)

• 匹配到父元素的第2个子元素
  ul li:nth-child(2){}
• 匹配到父元素的倒数第2个子元素
  ul li:nth-last-child(2){}
• 匹配到父元素的序号为奇数的子元素
  ul li:nth-child(odd){} odd 是关键字 奇数的意思(3个字母)
• 匹配到父元素的序号为偶数的子元素
  ul li:nth-child(even){}even(4个字母)
• 匹配到父元素的前3个子元素
  ul li:nth-chid(-n+3){}
  选择器中的 n是怎么变化的呢?
  因为n是从0,1,2,3…一直递增
  所以-n+3就变成了
  • n=0时 -0+3=3
  • n=1时 -1+3=2
  • n=2时 -2+3=1
  • n=3时 -3+3=0
• 匹配到父元素的后3个子元素
  ul li:nth-last-child(-n+3){}

4.1 li:nth-of-type(n)

这里只讲明 E:nth-child(n) 和 E:nth-of-type(n) 的区别 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推导即可

• li:nth-child(2) 选择到了父元素ul 里面的第二个子元素li 要淾索引和类型都一致，不一致的标签会设置不到。
• li:nth-of-type(2) 选择到了父元素ul里面的第二个li标签 在计算索引的时候 不管其他类型的标签。