选择器权重~伪类

权重参考值

/* 选择器的权重
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;
}