::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 | 在某元素之后插入内容 |