权重的原理与计算方式，伪类指定一个实际参数nth-of-type(an+b)

1020作业

1.上下文选择器

<ul class="list">
        <li class="item">item-1</li>
        <li class="item">item-2</li>
        <li class="item">item-3</li>
        <li class="item">item-4
            <ul class="item">sunzi1</ul>
            <ul class="item">sunzi2</ul>
            <ul class="item">sunzi3</ul>
        </li>
        <li class="item five">item-5</li>
        <li class="item six">item-6</li>
        <li class="item">item-7</li>
        <li class="item">item-8</li>
     </ul>

.list > li:nth-of-type(3){
    color: red;
}
/* 获取第一个 语法糖*/
.list > li:first-of-type{
    color: red;
}
/* 获取最后一个 语法糖 */
.list > li:last-of-type{
    color: red;
}
.box{
    width: 100px;
    height: 150px;
    border: 1px red;
}

实例效果

2.选择器的权重

    <p class="one">css1</p>
    <h1 class="al-3 color bgc">css2</h1>
    <h1>css3</h1>
    <h1>css4</h1>
    <h1>css5</h1>

/*（id,class,tag） 
  （0，  0 ， 0）
1.实体标记
2.排列顺序
3.计数方式
*/
/* ? 1.提权修改 */
body p{
    color:brown;
}
p{
    color:blueviolet;
}
/* ? 2.html修改 */
.al-3.color{
    color:yellow;
}
.al-3{
    color:blue;
}
.al-3.bgc{
    background-color: aqua;
}

实例效果

伪类指定一个实际参数nth-of-type(an+b)

<ul class="list">
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item">item4</li>
        <li class="item">item5</li>
        <li class="item">item6</li>
        <li class="item">item7</li>
        <li class="item">item8</li>
    </ul>

/* :nth-of-type(an+b)
    a:系数 0.1
    n:参数 0.1.2.3
    b:偏移量 从0开始
    */
    /* 匹配一个或者一组
    a=0匹配一个
    a=1匹配一组（正向取值）
    a=-1匹配一组（反向向取值）
    */
    .list > li:nth-of-type(5){
        background-color: aqua;
    }
    /* an+b
    0n+5=5 
    1.0*0+5=5
    2.0*1+5=5
    ....
    */
    .list > li:nth-of-type(1){
        background-color: bisque;
    }
    /* an+b
    0n+1=1 */
    /* 匹配一组
    1. 1*0+6=6
    2. 1*1+6=7
    3. 1*2+6=8
    4. 1*3+6=9 非法索引 停止计算
    */
    .list > li:nth-of-type(1n+6){
        background-color:red;
    }
    /* 反向取值 取前面三个
    1. -1*0+3=3
    2. -1*1+3=2
    3. -1*2+3=1 非法索引 停止计算
    */
    .list > li:nth-of-type(-n+3){
        background-color: blueviolet;
    }

实例效果