关于：before和：：before的区别 至 伪类和伪元素的区别
关于：before和：：before的区别 至 伪类和伪元素的区别
::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素 利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要使用content属性来指定内容的值。
区别：
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存 在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
那么现在就可以完整的回答标题中的问题了，对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
所以，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。
常见的伪类和伪元素元素和
伪类种类(分为结构性伪类和状态性伪类)
伪类 | 作用 |
|---|---|
:active | 将样式添加到被激活的元素 |
:focus | 将样式添加到被选中的元素 |
:hover | 当鼠标悬浮在上方时，向元素添加样式 |
:link | 将特殊样式添加到未访问过的链接 |
:visited | 将特殊样式添加到被访问过的链接 |
:first-child | 将特殊样式添加到元素的第一个子元素 |
:lang | 允许作者定义元素中能使用的语言 |
:last-child | 选择某个元素的最后一个子元素； |
:nth-child() | 选择某个元素的一个或多个特定的子元素； |
:nth-last-child() | 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； |
:nth-of-type() | 选择指定的元素； |
:nth-last-of-type() | 选择指定的元素，从元素的最后一个开始计算； |
:first-of-type | 选择一个上级元素下的第一个同类子元素； |
:last-of-type | 选择一个上级元素的最后一个同类子元素； |
:only-child | 选择的元素是它的父元素的唯一一个子元素； |
:only-of-type | 选择一个元素是它的上级元素的唯一一个相同类型的子元素； |
:empty | 选择的元素里面没有任何内容。 |
:checked | 匹配被选中的input元素，这个input元素包括radio和checkbox。 |
:default | 匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。 |
:disabled | 匹配禁用的表单元素。 |
:enabled | 匹配没有设置disabled属性的表单元素。 |
:valid | 匹配条件验证正确的表单元素。 |
伪元素种类
伪元素 | 作用 |
|---|---|
::first-letter | 将样式添加到文本的首字母 |
::first-line | 将样式添加到文本的首行 |
::before | 在某元素之前插入内容 |
::after | 在某元素之后插入内容 |