:nth-of-type
m=(1/-1)an+b
(1/-1): 正序倒序
a: 偏移量(间隔几个开始循环)
n: 元素的位置(从0开始)
b: 起始位置(从0开始)
常用:表示奇数m=2n+1
表示偶数m=2n
CSS
/*
m=(1/-1)an+b
(1/-1): 正序倒序
a: 偏移量(间隔几个开始循环)
n: 元素的位置(从0开始)
b: 起始位置(从0开始)
常用:表示奇数m=2n+1
表示偶数m=2n
*/
.list > li:nth-of-type(m){
background-color: red;
}HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实例演示结构伪类,通过位置关系匹配子元素</title> </head> <body> <ul class="list"> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> <li class="item">item6</li> <li class="item">item7</li> <li class="item">item8</li> <li class="item">item9</li> <li class="item">item10</li> </ul> <br> </body> </html>
