CSS-结构伪类-元素定位

结构伪类-:nth-child

:nth-child(1)：是父元素中的第1个子元素；

//让li1变色
ul li:nth-child(1){
    color:red
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

:nth-child(2n)：父元素的【第偶数个】子元素（2、4、6）

:nth-child(2n+1)：父元素的【第奇数个】子元素（1、3、5）

:nth-child(-n+2)：【前2个元素】

可以将n取值为0带入第一次，然后n取值1带入第二次，依次带入得到想要的公式。

:nth-of-type、:nth-last-of-type

//这个就是找第三个子元素,如果多出一个p标签，找到的仍然是div2，因为就是找第三个元素，而不是第三个div
//这个表示：我是个div元素，然后是第三个子元素，没有说我是第三个div元素！！！
.box div:nth-child(3){
    color:red
}

<div class = "box">
    <div>我是列表1</div>
    多出一个<p>我是p元素</p>
    <div>我是列表2</div>
    <div>我是列表3</div>
    <div>我是列表4</div>
    <div>我是列表5</div>
    <div>我是列表6</div>
    <div>我是列表7</div>
    <div>我是列表8</div>
</div>

如果想要找到【第三个div元素呢？】

//会排除非div元素，读取nth前面的那个类型对应的元素
.box div:nth-of-type(3){
    color:blue
}

<div class = "box">
    <div>我是列表1</div>
    多出一个<p>我是p元素</p>
    多出一个<span>我是span</span>
    <div>我是列表2</div>
    <div>我是列表3</div>
    <div>我是列表4</div>
    <div>我是列表5</div>
    <div>我是列表6</div>
    <div>我是列表7</div>
    <div>我是列表8</div>
</div>

区别

:nth-of-type()用法跟:nth-child()类似，不同在于：:nth-of-type()计数时，只计算同种类型的元素；

:nth-last-of-type()用法跟:nth-of-type()类似，不同点在于：:nth-last-of-type()是从最后一个这个类型子元素，往前数

其他结构伪类

:root：根元素，就是HTML元素

:empty：代表里面完全空白的元素