CSS Pseudo-element selectors pseudo-Object selector

One:

CSS3 changes the single colon (:) pseudo-element selectors) preceding the pseudo-object selector to double colons (::) to distinguish pseudo-class selectors (pseudo-classes selectors), but the previous notation is still valid.

In order to support IE8, many current cases still use a single colon, showing the same effect

Selectors Selector	CSS Version Version	Description Brief introduction
E:first-letter/e::first-letter	Css1/css3	Sets the style of the first character within an object.
E:first-line/e::first-line	Css1/css3	Sets the style of the first row within the object.
E:before/e::before	Css2/css3	Sets what happens before the object, based on the logical structure of the object tree. Used in conjunction with the Content property
E:after/e::after	Css2/css3	Sets what happens after the object (based on the logical structure of the object tree). Used in conjunction with the Content property
E::selection	CSS3	Sets the color of the object when it is selected.

1.e:first-letter/e::first-letter{Srules}

Sets the style of the first character within an object.

/* * IE7 and above, GOOGLE,FF support */  {    font-size: 2em;     Color: red;}

/* * CSS3 uses double colon ID, IE8 and the following browsers do not support */  {    font-size: 2em;     Color: red;}

2.e:first-line/e::first-line{srules}

Sets the style of the first row within the object.

Note: The current pseudo-element property is valid only for the text content of the current element

/* * IE7 and above, GOOGLE,FF support */  {    color: red;}

/* * CSS3 uses double colon ID, IE8 and the following browsers do not support */  {    color: red;}

3.e:before/e::before{srules}

Sets what happens before the object, based on the logical structure of the object tree. Used in conjunction with the Content property,

In front of the current element tree structure, add an element and make the content of the element (only plain text is supported)

/* * In front of the current element tree structure, add an element and make the content of the element * IE8 and above browsers, GOOGLE,FF support the pseudo-element */  {    position: absolute;     Background: #fff;     color: red;     content: "If you can see this text, it means that your browser only supports E:before";     font-size: 14px;     Border:1px solid red;}

/* * In front of the current element tree structure, add an element and make the content of the element * IE9 and above browsers, GOOGLE,FF support the pseudo-element */  {    position: absolute;     Background: #fff;     color: red;     content: "If you can see this text, it means that your browser only supports E:before";     font-size: 14px;     Border:1px solid red;}

4.e:after/e::after{srules}

What happens after the object is set (according to the logical structure of the object tree)

Using the same method as above

/* * In front of the current element tree structure, add an element and make the content of the element * IE8 and above browsers, GOOGLE,FF support this pseudo-element * If the current element uses positioning, the pseudo-element is positioned relative to the current element's */  {    position: absolute;     Top:0px;     background: #fff;     color: red;     content: "If you can see this text, it means that your browser only supports E:before";     font-size: 14px;     Border: 1px solid red;}

5.e::selection{Srules}

sets the style of the object when it is selected. Mostly text style

/* *  Set the style of selected text *  IE9 and above support, Google support, but FF Browser, does not support the standard mode need to prefix */ {    background : #111;     color: red;}  {    background: #111;     Color: red;    /* The following properties do not work */     Border: 1px solid red;     font-size: 30px;}

CSS Pseudo-element selectors pseudo-Object selector