权重和伪类

权重等级：

• id:千位
• clsaa:百位
• teg;个位

  等级排序(从小到大):

• (0,0,1)
  • 代码：
    ``` li{ color: blue; }
    ```
  • (0,0,2)
  • 代码：
    body li{ color: blue; }
• (0,1,0)
  • 代码：
    .list{ color: blue; }

• (0,1,1)

  • 代码:

  .list li{ color: blue; }

• (0,1,2)

  • 代码:
    body.list li{color: blue;}
• (1,0,0)
  • 代码
    #cla{color: blue;}
• (1,1,0)
  • 代码:
    #cla .list{color: blue;}
• (1,1,1)
  • 代码:
    #cla .list li{color: blue;}
    
• (1,1,2)
  • 代码:
    body #cla .list li{color: blue;}
    

伪类控制器（算法公式）

a=(0,1,2,3,….)
n=(0,1,2,3,….)
b=移动的位置
a*n+b

• 匹配地一个
  • 代码:
    .list :first-of-type{color: brown;}
• 匹配最后一个
  • 代码：
    .list :last-of-type{color: red;}
    
• 匹配一组
  • 代码：
    .list{color: red;}

• 匹配一组的前后几个

  • 代码：

    • 匹配一组的前三个(算法)
      a*n+b

       -n+3=
       -1*0+3=0+3=3
       -1*1+3=-1+3=2
       -1*2+3=-2+3=1

  .list :nth-of-type(-n+3){color: red;}

   *   匹配一组的后四个(算法)

  .list :nth-last-of-type(-n+4){color: blue;}
  

• 匹配单数

  • 代码：
    .list :nth-of-type(odd){color:burlywood;}
    
• 匹配偶数
  • 代码：
    .list :nth-of-type(even){color:burlywood;}
    
• 自定义第几行

• 代码：
  .list :nth-of-type(4){color:deeppink;}
  

• 在元素前插入内容

  • 代码：
    .list :before{content: "我在这里---";color: red;}
    

• 在元素尾插入内容
  • 代码
    .list :after{content: "---我在这里";color: red;}