权重和伪类

发布于：2022-03-22 08:42:30  栏目：技术文档

权重等级：

• 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;}

相关推荐