Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
/* 选择器的权重
id(千) > class(百) > tag(个)
*/
/* tag 1个 权重 (0,0,1) */
body {
color: red;
}
/* tag 2个 权重 (0,0,2)*/
body ul {
background-color: aqua;
}
/* class 1个 权重 (0,1,0) */
.list {
background-color: chartreuse;
}
/* id 1个 权重 (1,0,0) */
#b {
background-color: coral;
}
/* :first-of-type 匹配分组的第一个元素 */
.list > li:first-of-type {
background-color: aqua;
}
/* :last-of-type 匹配分组的最后一个元素 */
.list > :last-of-type {
background-color: darkorange;
}
/* :nth-last-of-type()
反向匹配第三个元素
a=0
n=n
b=3
a*n+b=3
*/
.list > :nth-last-of-type(3) {
background-color: deeppink;
}
/* 获取偶数索引元素
a=2
n=n
b=0
a*n+0=(
2*0+0=0
2*1+0=2
2*2+0=4
2*3+0=6
....
以此类推
)
*/
.list > :nth-last-of-type(2n) {
background-color: chartreuse;
}
/* 获取奇数索引元素
a=2
n=n
b=1
a*n+1=(
2*0+1=1
2*1+1=3
2*2+1=5
2*3+1=7
....
以此类推 */
.list > :nth-last-of-type(2n + 1) {
background-color: brown;
}