​ html元素：

<div class="box"><ul><li>我是li001</li><li>我是li002</li><li>我是li003</li><li>我是li004</li><li>我是li005</li><li>我是li006</li><li>我是li007</li><li>我是li008</li><li>我是li009</li></ul>
</div>

:nth-child(）

/* 选择全部 */
ul li:nth-child(n) {list-style: none;
}/* 选择所有偶数 */
.box li:nth-child(2n) {color: pink;
}/* 选择所有奇数 */
.box li:nth-child(2n-1) {color: purple;
}/* 选择前两个元素 */
.box ul li:nth-child(-n + 2) {font-size: 30px;
}

:nth-last-child():从最后一个子元素开始计数

/* 选择最后一个 */
ul li:nth-last-child(1) {color: pink;
}/* 选择最后3个元素 */
ul li:nth-last-child(-n + 3) {color: purple;
}

:nth-of-type(计数时只计算相同类型的元素)

html:当我们在li中用一个div替换了li时，用li:nth-child(3)已经选不中第三个元素了，需要使用div:nth-child(3)

<div class="box"><ul><li>我是li001</li><li>我是li002</li><div>我是div003</div><li>我是li004</li><li>我是li005</li><li>我是li006</li><li>我是li007</li><li>我是li008</li><li>我是li009</li></ul>
</div>

CSS, ul li:nth-child(3)表示在ul的所有子元素中，即是li又是第3个子元素才生效，显然后一个样式生效

ul li:nth-child(3) {color: aqua;
}ul div:nth-child(3) {color: purple;
}

当然，我们也可以使用:nth-of-type来选择

/* 选择ul的子元素中第三个li子元素 */
ul li:nth-of-type(3) {color: pink;
}

:nth-last-of-type()是从最后一个子元素往前计数

其他常见的伪类：

• :first-child = :nth-child(1)
• :last-child = :nth-last-child(1)
• first-of-type = :nth-of-type(1)
• last-of-type = :nth-last-of-type(1)
• only-child 父元素中唯一的子元素
• only-of-type 父元素中唯一的该类型子元素
• :root 根元素 HTML
• :empty 代表完全空白的元素

否定伪类

• :not(x)
  • x是一个简单选择器：元素选择器、属性选择器、类选择器、id选择器、伪类（除了否定伪类）

/* 选择ul下面的li，并且class不能为item */
ul li:not([class='item']) {font-size: 30px;
}