伪类和伪元素的区别与使用

伪类和伪元素

伪类和伪元素的区别

1. 作用不同

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

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

2. 权重不相同

   1. 伪类 是 10 （类、属性选择器 [type=submit]）
   2. 伪元素 是 1 (标签选择器 )

3. 使用场景不同

   1. 比如 鼠标经过盒子，盒子里面的样式会有变化，则需要使用 伪类。
   2. 如果想在盒子内部插入一个小盒子，此时可以使用伪元素。

伪元素最常见的使用场景

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

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

伪类和伪元素的使用

遇到这个场景：

这个 小手机 模块可以使用伪元素来做： 因为是插入手机模块

比如：

div::before {
    content: '';
    width: 20px;
    height: 50px;
    background:  url(./plats1.png) no-repeat 0 0;
}

当我们鼠标经过这个div盒子的时候，是div盒子变图片还是里面的before变颜色呢？

答案是 里面的before 变图片位置

所以写法是: 鼠标经过div，里面的before这个伪元素变化背景位置

div:hover::before {
    background-position: -100px 0;
}

考核题1：

有如下结构, 请回答2个问题：

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

1. 如果想要给第1个li 改变背景位置怎么写呢？

   ul li:nth-child(1) {
       background-position: -100px 0;
   }
   

2. 如果想要第一个li，改变伪元素 before 里面的背景位置如何写？

   ul li:nth-child(1)::before{
        background-position: -100px 0;
   }
   

3. 如果想要鼠标经过第一个li，改变伪元素 before 里面的背景位置如何写？

   ul li:nth-child(1):hover::before {
        background-position: -100px 0;
   }
   

综上,小伙伴们可以基本区分和使用了吗~