选择器的权重

1.上下文选择器/层级选择器
css语法表达
1.子元素：>
2.后代元素: 空格
3.相邻兄弟：+
4.所有兄弟：~
层级：>,空格
平级：+，~
2.选择器权重
页面元素：标签+属性 样式规则：选择器{声明}

1.选择器的权重,计算过程

<div class="a">
   <h1 id="b" class="c">hello world</h1>
</div>
css文件
div {
    background-color: red;
    width: 200px;
}
div > h1 {
    color: blue;
}

div标签的样式的权重是：0个id，0个class，1 个标签 ——（0，0，1）
h1标签的权重是： 0个id，0个class，2 个标签(div+h1) ——（0，0，2）

1. 现在改变字的颜色

   div {
    background-color: red;
    width: 200px;
   }
   div > h1 {
    color: blue;
   }
   div > h1 {
    color: cyan;
   }

   这里通过后写样式覆盖先前的样式将字的颜色经行改变
2. 现在想将字改回原来的颜色
   有两种方法：
   1.第一种是继续使用后写的样式去覆盖先前的样式
   2.第二种就是改变样式的权重

   div {
    background-color: red;
    width: 200px;
   }
   div > h1.leteracy {
    color: blue;
   }
   div > h1 {
    color: cyan;
   }

   现在div > h1.leteracy的权重是：0个id，1个class，2个tagName —— （0，1，2）
   而先前div > h1的权重是：0个id，0个class，2个tagName —— （0，0，2）
   显然（0，1，2） > (0 , 0 ,2)
   通过这样的写法，css通过选择器的权重从而可以忽略书写的顺序
3. 调试样式
   在样式后加 ！important 从而忽略样式的权重

   div {
    background-color: red;
    width: 200px;
   }
   div > h1.leteracy {
    color: blue;
   }
   div > h1 {
    color: cyan !important;
   }

   此时虽然上一个h1的权重大于后一个的权重，但是后一个样式中加了!important就只显示后一个的样式
   伪类选择器
   1.计算权重，伪类也算是class
   结构伪类
   1.生成无序列表

   <ul class="list">
        <li class="item1">item1</li>
        <li class="item2">item2</li>
        <li class="item3">item3</li>
        <li class="item4">item4</li>
        <li class="item5">item5</li>
        <li class="item6">item6</li>
        <li class="item7">item7</li>
        <li class="item8">item8</li>
        <li class="item9">item9</li>
        <li class="item10">item10</li>
        <li class="item11">item11</li>
        <li class="item12">item12</li>
        <li class="item13">item13</li>
        <li class="item14">item14</li>
        <li class="item15">item15</li>
    </ul>

   2.改变全部样式CSS写法
   写法1：

   ul {
    width:100px;
    background-color: black;
   }
   ul>li {
    color:aqua;
    background-color: violet;
   }
   // 写法2：使用伪类：匹配分组的任意位置的子元素th-of-type(n)
   ul {
    width:100px;
    background-color: black;
   }
   ul>:nth-of-type(n) {
    color:aqua;
    background-color: violet;
   }

   效果是一样的
   参数解释：

   :nth-of-type(an+b):
   a=[0,1,2….]
   n=[0,1,2,….]

   b为偏置量
   如 -n+3 ：
   -n result
   0 5
   -1 4
   -2 3
   -3 2
   -4 1
   忽略 =< 0 的数字
   即改变前五个的样式
   将其改成:nth-last-type-(an+b):一样的参数就会变成后五个
   又如：
   :nth-of-type(-2n+15)
   -n -2n+15
   0 15
   1 13
   2 11
   3 9
   4 7
   5 5
   6 3
   7 1
   将选中这些样式