权重的原理计算和伪类匹配关系

1.权重的计算与原理

/* 1.实体标记 : id,class,tag */
/* 2.排列顺序:id,class,tag */
/* 3.记数方式:选择器中的实体标记数量 */
/* 权重表示方法:选择器中的实体标记数量 */
/* (0,0,1) :id=>0,class=>0,tag=>1*/
/* (id,class,tag) */
h1 {
  color: red;
}
/* 权重是多少？（0,1,1）id=>0,class=>1,tag=>1
id=null=0
class=.title=1
tag=h1=1
*/
h1.title {
  color: aliceblue;
}
/* 
    id=#active=1
    class=.title=1
    tag=h1=1
*/
h1#active.title {
  color: aliceblue;
}
/* 
权重(1,2,3)
id=#active=1
class=.top .title=2
tag=header,h1,div=3
*/
header .top h1 .title div#active {
  color: aliceblue;
}

注意事项

权重注意事项：尽量不要再’html’中使用’id’属性
原因：1.id权重过大，位于权重顶端
2.id会导致选择器失去弹性/弹性不足，不利于调试或复用

2.伪类的匹配关系

demo.html

<!-- 伪类：伪（假，仿),类(class级) -->
    <!-- 伪类类型 -->
    <!-- 
        1.结构伪类：根据元素的位置来匹配元素
        2.状态伪类：根据元素的状态来匹配元素
     -->
    <ul class="list">
      <li class="li">item1</li>
      <li class="li">item2</li>
      <li class="li">item3</li>
      <li class="li">item4</li>
      <li class="li">item5</li>
      <li class="li">item6</li>
      <li class="li">item7</li>
      <li class="li">item8</li>
    </ul>

demo.css

1.1 原理

 :nth-of-type(an + b)
1.a:系数，[0,1,2,3,4....]
2.n:参数，[0,1,2,3,4....]
3.b:偏移量，从0开始
规则：计算出来的索引，必须是有效的（从1开始）
素的二种场景：1.匹配一个，2.匹配一组

1.2 匹配第一个

/* a=0:匹配第一个 */
.list > li:nth-of-type(0n + 1) {
  background-color: blue;
}

1.2 匹配一组

/* a=1:匹配一组 */
/* 全选:1n+0 */
.list > li:nth-of-type(1n + 0) {
  background-color: cadetblue;
}

1.3 匹配从第三个开始

/* a=1 , b=3 */
.list > li:nth-of-type(1n + 3) {
  background-color: blue;
}

1.4 匹配前三个

/* -n  匹配前3个 */
.list > li:nth-of-type(-n + 3) {
  background-color: cadetblue;
}