伪元素和伪类选择器

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

最近使用了css的伪元素选择器和伪类选择器，感觉它们很相似，但是又有本质的区别。网上查了一些资料，解释得很详细，很专业。现在记录一下自己比较通俗理解。

一、伪类选择器和伪元素选择器的定义

伪元素的定义：CSS伪元素是用来添加一些选择器的特殊效果。

伪元素的语法：CSS伪类是用来添加一些选择器的特殊效果。
两者的定义，除了名字都一样。网上也有人也对定义和用法有比较深入的介绍，这里就不赘述了。

二、两者的区别

1.作用对象不同

通过使用这两种选择器，我发现它们作用的对象是不同的。

1、伪元素选择器作用的对象是元素本身，无论元素是否包含子元素

列举两个例子：

1、改变元素内首字母的颜色

<div class="one">
      <div>a</div>
      <div>b</div>
</div>

.one::first-letter{
    color: #409eff;
  }

效果如下：

改变元素内首字母的颜色时，元素是否有子元素，并不影响效果，也就是说，伪元素选择器作用于元素本身内容，而元素的子元素被忽略了，或者说被看作是元素的内容了。
2、添加一个子元素

.one::before{
    width: 20px;
    height: 20px;
    content: "";
    background-color: #409eff;
    position: absolute;
    left: 20px;
    top: 20px;
  }

效果如下：

动态添加一个子元素时（位置：第一）。元素选择器作用于元素本身。

2、伪类选择器作用的对象是元素本身或者其的子元素

举个例子：
1、鼠标悬停改变颜色

<div class="two">
      <div>a</div>
      <div>b</div>
      <div>c</div>
    </div>

.two :hover{
    color: #409eff;
  }

效果如下：



鼠标悬停改变颜色时，:hover前不加空格，它作用于元素本身，:hover前加空格，它作用于元素子元素。

2.虚实不同

1.伪元素选择器是虚的

伪元素选择器虚的当它添加子元素时，新建了一个元素，但是这个元素并不存在于dom树中。这点检查代码时可以清楚的看到。

2.伪类选择器是实的

伪类选择器并不会创建元素，它只是修改元素的样式。

总结

我对伪元素选择器和伪类选择器的理解。是通过查阅资料再结合自己使用这两种选择器以后总结的。只是自己对这两种选择器一点浅薄、实用、通俗的理解，仅供参考。如果有错误、片面的地方，还请大家多指教。