菜鸡教学~5

今天我们来教学伪类选择器

:not 除了自身其他的选择标签都要使用

下面可以配合：not使用也可以单独使用

:first-child 第一个
:last-child 最后一个
:only-child 唯一一个
：nth-child 第几个

1. ：not除了自身其他的选择标签都要使用
   div{
   width: 100px;
   height: 100px;

    }
    div:not(:first-child){
        color: red;
    }
   

2.:first-child第一个使用
div:first-child{
color: blue;
}

3.:last-child最后一个使用
div:last-child{
color: brown;
font-size: 20px;

    }

4.only-child唯一一个，只能是一个元素的子元素。
span:only-child{
color: brown;
font-size: 20px;
}

5.：nth-child() 第几个，在后面括号里面填写第几个

  div>ul li:nth-child(3){
      color: chartreuse;
      font-size: 30px;
  }
<div>
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
        <li>1000</li>
        <li>1233</li>
    </ul>
</div>

上面的元素会被其他的元素影响

下面的元素不会被其他元素影响使用的方法都是跟上面一样

1.：first-of-type 第一个
2.：last-of-type 最后一个
3.：only-of-type 唯一一个
4.：nth-of-type 第几个
5.：nth-last-of-type 倒数第几个

谢谢大家观看

菜鸡教学敬请见谅谢谢！