day28－认识一些不太熟的伪类选择器（中）

安安，今天继续讲伪类选择器欧！看书才发现...omg原来还有这麽多不知道的伪类选择器！！！原本以为一篇就能结束了，殊不知今日打完後发现，字数过多，可能会造成大家打开文章直接想放弃的概念（（
所以为了能让大家轻松低看完，便把今天下半部分的内容移到明天罗！（没想到伪类花了三篇文章QQ)
那就开始继续延续昨天的罗！书本参考资源一样是金鱼的选择器:)

:nth-child() & :nth-last-child()

:nth-child()，括号内可以写简单的计算公式，所以完整的语法会是:nth-child(an+b)。

奇数odd与偶数even :nth-child(odd/even)

ul :nth-child(odd){
	color: red;
}

这样只会有奇数的被选择到，1.3.5；反之偶数就是括号里面改成even。

选取特定单一物件 :nth-child(n)

ul :nth-child(3){
	color: red;
}

间隔跳位选取物件 :nth-child(an+b)

最强大的地方就是可以用公式做选取，

如果今天要每隔三个就选取一个物件，公式就是:nth-child(3n)，意思是每三个里面的第三个会被选取。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

ul :nth-child(3n){
	color: red;
}

✎公式原理，括号内的公式为an+b，运算子可变更，n为固定数，由0开始计算。

公式分解前段：an→a*n，那例如3n的话会得到以下结果：

3*0=0 , 3*1=3 , 3*2=6 , 3*3=9 以此类推～

所以总共选了第0,3,6,9个物件。

公式分解後段：3n+1，＋号可以被变更为－号：

3*0+1=1 , 3*1+1=4, 3*2+1=7 , 3*3+1=10 以此类推～

d(d＇∀＇)直接用眼看的技巧：

3n+1就是要选取到三个里面的第一个项目;3n+2就是要选取三个里面的第二个项目，所以说直接看公式就可以了！

:nth-of-type() & :nth-last-of-type()

当我们又看到of-type的时候，就代表是要看"分类"顺序。

:nth-of-type() 的意思是，选取第n个同类子物件，n就是我们要选的目标，它可以是公式也可以使用关键字（odd/even）。

<div class="wrap">
  <span>1</span><span>2</span><span>3</span><span>4</span>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

.wrap :nth-of-type(odd){
  color: red;
}

选取特定单一物件 :nth-of-type(n)

其实跟上面所说的方式一样，只差在他是先选取类别在选顺序。

<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

.wrap :nth-of-type(3){
  color: red;
}

间隔跳位选取物件 :nth-of-type(an+b)

其实跟上面所说的方式一样，只差在他是先选取类别在选顺序。

:nth-of-type(3n) 每隔三个同类物件就选取，先将wrap内的"物件分类"，再将每个同类物件里面的第三个选取（三个倍数）。

<div class="wrap">
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
  <div>div4</div>
  <div>div5</div>
  <div>div6</div>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <p>p4</p>
  <p>p5</p>
  <p>p6</p>
</div>

.wrap :nth-of-type(3n){
  color: red;
  background-color: rgb(182, 237, 185,0.5);
}

感谢各位的收看，明日再继续下半部分:)