<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 选中第一个元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*选中最后一个元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*选中指定的元素，数值从1开始。*/ div ul li:nth-child(3){ font-size: 20px; color: green; } /*选中所有的元素，括号内必须是n*/ div ul li:nth-child(n){ font-size: 30px; color: purple; } /*选中偶数位*/ div ul li:nth-child(2n){ font-size: 30px; color: pink; } /*选中奇数位*/ div ul li:nth-child(2n+1){ font-size: 30px; color:black; } /*隔一定的位置换色， 例如：隔2换色，就是3n+1*/ div ul li:nth-child(3n+1){ font-size: 30px; color: skyblue; } </style> </head> <body> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>
原文：https://www.cnblogs.com/Rooney10/p/13096414.html