权重与伪类选择器

权重

/* 千：id 
百：class
个：tag */
/* 调试模式 提权到最高*/
p{
    color:orange !important;
}
/* 单个id 1，0，0 */
#helloid{
    color: seagreen;
}
/* class+标签 0，1，2*/
body p.hello{
    color: salmon;
}
/* 单个class 0，1，0 */
.hello{
    color: blueviolet;
}
/* 多个标签 0，0，2*/
body p{
    color: red;
}
/* 单个标签 0，0，1*/
p{
    color: blue;
}

伪类选择器

/* 第一个 */
.list>:first-of-type {
    background-color: green;
}
/* 最后一个 */
.list>li:last-of-type {
    background-color: sienna;
}
/* 第n个 */
.list>:nth-of-type(6){
    background-color: rgb(10, 43, 72);
}
/* 倒数第n个 */
.list>li:nth-last-of-type(4) {
    background-color: violet;
}

结构伪类的参数

格式：:nth-of-type(an+b)

1. a: 系数, [0,1,2,…]
2. n: [0,1,2,3,….]
3. b: 偏移量, 从0开始
   注: 计算出来的索引,必须是有效, 从1开始

   匹配单个：a=0

   

   .list> :nth-of-type(0n + 3) {
    background-color: lightgreen;
   }

   匹配一组：a=1

   

   .list> :nth-of-type(n + 3) {
    background-color: lightgreen;
   }
   /* 取前3个 */
   .list> :nth-of-type(-n + 3) {
    background-color: lightgreen;
   }
   /* 取最后3个 */
   .list> :nth-last-of-type(-n + 3) {
    background-color: lightgreen;
   }
   /*奇数*/
   .list> :nth-of-type(2n - 1) {
    background-color: lightgreen;
   } 
   /*奇数语法糖*/
   .list> :nth-of-type(odd) {
    background-color: lightgreen;
   }
   /*偶数*/
   .list> :nth-of-type(2n) {
    background-color: lightgreen;
   } 
   /*偶数语法糖*/
   .list> :nth-of-type(even) {
    background-color: lightgreen;
   }