CSS3常见伪类和伪元素及其使用方法

::before 是一个伪元素（pseudo-element），用于在所选元素的内容前面插入一个虚拟的元素。它通过CSS样式来装饰和定位，并且不需要在HTML中实际添加额外的元素，下面是一个如何在一个按钮前面插入一个 "+" 图标的实例：

.btn::before {
  content: "+"; /* 设置伪元素的内容 */
  color: #fff; /* 设置伪元素的颜色 */
  background-color: #007bff; /* 设置伪元素的背景色 */
  border-radius: 50%; /* 设置伪元素的圆角 */
  width: 20px; /* 设置伪元素的宽度 */
  height: 20px; /* 设置伪元素的高度 */
  line-height: 20px; /* 设置伪元素内容的行高 */
  text-align: center; /* 设置伪元素内容的对齐方式 */
  position: absolute; /* 设置伪元素的定位方式 */
  left: -10px; /* 设置伪元素相对于父元素左侧的偏移值 */
  top: 50%; /* 设置伪元素相对于父元素顶部的偏移值 */
  transform: translateY(-50%); /* 设置伪元素垂直居中 */
}

除了 ::before 伪元素，CSS中还有其他一些常用的伪类和伪元素，如 ::after、:hover、:nth-child()、:first-child 等。 

---

伪类使用一个冒号（:）作为前缀，而伪元素使用两个冒号（::）作为前缀。

（1）::after：在所选元素的内容后面插入一个虚拟的元素。与 ::before 类似，可以用于添加额外的样式装饰。

.element::after {
  content: "After";
}

（2）:hover：当鼠标悬停在所选元素上时触发样式效果。常用于实现交互效果。

.button:hover {
  background-color: #ff0000;
}

（3）:nth-child：选择父元素下指定位置的子元素。可以根据指定位置的顺序来选择对应的子元素。

ul li:nth-child(odd) {
  background-color: #f1f1f1;
}

ul li:nth-child(even) {
  background-color: #ffffff;
}

（4）:first-child：选择父元素下的第一个子元素。

ul li:first-child {
  font-weight: bold;
}

（5）:focus：当元素获取焦点时触发样式，通常用于表单元素。

input:focus {
  border: 2px solid blue;
}

（6）:visited：选择访问过的链接。

a:visited {
  color: purple;
}

另外呢伪元素还有：

1. ::first-line：选择元素的第一行文本。
2. ::first-letter：选择元素的首字母。
3. ::selection：选择用户选中的文本。
4. ::placeholder：选择表单元素的占位符文本。

伪类还有：

1. :last-child：选择父元素下的最后一个子元素。
2. :not(selector)：选择不满足指定选择器的元素。
3. :nth-of-type(n)：选择父元素下指定类型的子元素中的第n个元素。