Before 和: : before 有什么区别？

我刚看到一个包含 ::before标签的 CSS 代码。我看了看 MDN，想知道 ::before是什么，但我真的不明白。

有人能解释一下它是怎么工作的吗？

它是否在我们通过 CSS 选择之前创建一个 DOM 元素？

23034 次浏览

小开

According to those docs, they are equivalent:

element:before  { style properties }  /* CSS2 syntax */


element::before { style properties }  /* CSS3 syntax */

The only difference is that the double colon is used in CSS3, whereas the single colon is the legacy version.

Reasoning:

The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.

小开

They essentially mean the same thing. The :: was introduced in CSS3 to help descriminate between pseudo elements (like :before and :after) and pseudo classes (like :link and :hover).

小开

One is the CSS2 (:before) way and the other is CSS3 (::before). Currently they are interchangeable in browsers that support CSS2 & CSS3.

Here's a good explanation: http://www.impressivewebs.com/before-after-css3/

小开

I checked out MDN and w3.org, and the best I could come up with is that :: is used for structural changes, and : is used for styling.

They are currently interchangeable for compatibility reasons.

It appears to separate :link (for instance), which styles a <a>, from :before (which is a structural change).

: is for styling, :: is for structure.

小开

最佳答案

This distinguishes pseudo elements from pseudo classes.

The difference between pseudo classes and pseudo elements is described at http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html