NTH选择器选择单双行

通过nth-of-type选择单双行

其中odd意思是奇数，even意思是偶数

p:nth-of-type(odd)
{
background:#ff0000;
}

p:nth-of-type(even)
{
background:#0000ff;
}

CSS3的nth选择器

上述用到的是CSS3里的nth选择，其一共分为四个，而nth代表什么意思。。。我没有查到。。fuck。。。

选择器	示例	解释
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个向前计数
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个向前计数

可以看出 除了last这个关键字可以改变计数方向以外 还有 child 和 type 两种选择方式

child和type的区别

通过百度我们得知

1. ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败
2. ele:nth-of-type(n)是指父元素下第n个ele元素

<div>
  <ul>
      <p>aaaa</p>
      <li>bbbb</li>
      <li>cccc</li>
  </ul>
</div>

1. ul li:nth-child(2) : 选择的是
2. aaaa
节点
3. ul li:nth-of-type(2): 选择的是
4. bbbb
节点

通过ab+b选择

nth选择器除了使用数字之外，还可以使用循环公式 an+b ,例如

ele:nth-child(3n+4) 会去匹配第 4, 7, 10, 13 个元素

赏

请问老板还招人么(/ω＼)

支付宝

微信