伪类和伪元素的区别及使用场景

1. 伪类和伪元素的区别

1.1 作用不同

       伪类是一种状态，可以看看做是选择器。比如鼠标经过 伪类 :hover , 比如 结构伪类 li:nth-child， 一个冒号。

       伪元素 是 元素， 简单来说，就是用css 模拟出来了一个盒子。

1.2 权重不相同

       伪类 是 10 （类、属性选择器 [type=submit]）

       伪元素 是 1 (标签选择器 )

1.3 使用场景不同

       比如:鼠标经过盒子，盒子里面的样式会有变化，则需要使用 伪类

       如果想在盒子内部插入一个小盒子，此时可以使用伪元素。

2. 伪元素最常见的使用场景

       做一些装饰类的小图标的时候，可以使用伪元素。 比如:

       注意： 不要迷恋伪元素，非常重要的信息，不要使用伪元素。比如 产品标题，产品介绍等。它主要用来装饰作用的。

3. 结构伪类 nth-child

      根据结构来选择标签，选儿子（亲儿子） 选择第几个，比如选择第4、8个元素等，这是结构伪类的使用场景。   

       但是，结构伪类nth-child使用，是有具体要求的， 如果非要按按照顺序来使用，必须是亲兄弟。比如：这个排序比较简单

<ul>
    <li>手机</li>
    <li>电脑</li>
    <li>榴莲</li>
</ul>

选择第3个li

ul li:nth-child(3) {
    color: red;
}

但是，如果是这样，则排序就不对：

<div class="box">
     <a href="#">链接</a>
     <p>我是段落</p>
     <p>我是段落</p>
     <p>我是段落</p>
     <p>我是段落</p>
</div>

       nth-child() 选孩子的时候，不一定是同类的。 依次来排号。

       进行选择的时候，先执行 nth-child(n) 先按照序号找到这个元素， 然后再看前面的标签选择器能否匹配。

.box p:nth-child(5) {
    color: red;
}

      拓展：

       可以使用 另外一个选择器 li:nth-of-type() 选择的时候可以分类, 必须是同一类

       p:nth-of-type(1)

      执行顺序： 先看 p， 再执行 nth-of-type 从1开始排号。