CSS伪类和伪元素

定义：( 取自W3School )

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于向某些选择器设置特殊效果。

语法：

1. CSS伪类：
    selector : pseudo-class {property: value;}
    selector.class : pseudo-class {property: value;} 
2. CSS伪元素：
    selector : pseudo-element {property: value;}
    selector.class : pseudo-element {property: value;} 

种类：

伪类.PNG

伪元素.PNG

区别：

以伪类 ":first-child" 和伪元素 ":first-letter" 为例进行说明。
使用伪类":first-child"：

li:first-child {color: red;}

    
one
    
two
    
three

效果如下：

伪类举例1.PNG

如果不想使用伪类而达到以上同样的效果，我们需要给第一个 li 元素添加一个class：

li.first-child {color: red;}

    
one
    
two
    
three

使用伪元素":first-letter":

p:first-letter{
    color:red;
    font-size:xx-large;
}
first-letter

效果如下：

伪元素举例1.PNG

如果不想使用伪元素达到以上效果，我们需要给段落 p 的首字母加上元素 span ，然后再给 span 元素添加样式：

.first-letter{
    color:red;
    font-size:xx-large;
}
first-letter

so~，两者的 区别 就是：

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。