css 伪类选择器 vs 伪元素

先截图一张

图中主要截取的是css中的伪选择器，不过看似都是以冒号开头，但是这里面有实质性的差别，到底是伪元素还是伪选择器呢
在css3中，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

伪元素

图中红线圈出的部分则为伪元素了,在css3中的写法改变为
::first-line
::first-letter
::before
::after
::selection
其中的before和after常配合content使用，例如

<div>
    <h1>welcome</h1>
</div>

div:before{
    content: "hello world"
}

还有一种常用效果就是清除浮动，

.clearfix:after {clear: both;}

伪类选择器

伪类选择器： 和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见