What is the difference between a colon and two colons in CSS?

in peacetime work with the pseudo-class selector when a colon and two colon seems to be possible, so what is the difference between the two, we first look at the world of the CSS3 selector in the specification of a description:A Pseudo-element is made of both colons (::) followed by the name of the pseudo-element. This :: Notation are introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous One-colon notation for Pseudo-elem Ents introduced in CSS levels 1 and 2 (namely,: First-line,: First-letter,: Before And:after). This compatibility isn't allowed for the new pseudo-elements introduced in CSS level 3. A simple translation to the effect that a pseudo-element consists of a double colon and a pseudo-element name. Double colons are introduced in the current specification to differentiate between pseudo-classes and pseudo-elements. But pseudo-class compatible with existing styles, the browser needs to support the old pseudo-class, such as: First-line,: First-letter,: Before, after and so on. so the question is, what is a pseudo-class? What is a pseudo-element? First, read the definition of the two:

1. CSS pseudo-classes are used to add special effects to certain selectors.

2. CSS pseudo-elements are used to add special effects to certain selectors.

can be clear two points, the first two are related to selectors, the second is to add some "special" effect. The special point here is that they describe things that other CSS cannot describe. Pseudo-Classes can assign styles independent of the elements of a document, and can be assigned to any element, logically and functionally similar, but are predefined, do not exist in the document tree, and are expressed differently, so it is called a pseudo-class. The pseudo-element controls the same content as an element, but the pseudo-element does not exist in the document tree, and is not a true element, so it is called a pseudo-element. Pseudo-classes are:

1. : First-child,: Link:,vistited,:hover:,active:focus,:lang, : Not (s),: root , etc. ..

pseudo elements are:

1. : First-line,:first-letter,:before,:after, :p laceholder,:selection

Reminder , if your site only need to be compatible with WebKit, Firefox, Opera and other browsers, it is recommended to use a double colon for pseudo-elements, if you have to be compatible with IE Browser, It is safer to use the CSS2 single colon. If you are unsure, you can have two properties for some properties that require compatibility. the difference between Pseudo-class and pseudo-elements: Pseudo classthe pseudo-class selection element is based on the state in which the current element is present, or the attributes that the element currently has, not the static flags of the element's ID, class, attributes, and so on. Because the state is dynamically changing, when an element reaches a certain state, it may get a pseudo-class style, and when the state changes, it loses the style. As you can see, its function is somewhat similar to class, but it is based on abstractions outside of the document, so it is called a pseudo class. E : Link

1. Pseudo-classes will be applied to links that have not been accessed, with the: visited mutex.

E : hover

1. The pseudo-class will be applied to the element that has the mouse pointer hovering over it.

E : Active

1. The pseudo-class will be applied to the element being activated, such as the clicked Link, the button being pressed, and so on.

E : visited

1. Pseudo-classes will be applied to links that have already been visited, with: link mutex.

E : Focus

1. The pseudo-class will be applied to the element that owns the keyboard input focus.

E : First-child

1. The pseudo-class will be applied to the first occurrence of the element in the page.

E : lang

1. The pseudo-class will be applied to the case with the specified lang for the element.

3. Example

4. P:lang (Zh-cmn-hans) {

5. Color: #f00;

6. }

7. P:lang (en) {

8. Color: #090;

9. }

11. <p lang= "en" > China </p>

12. <p lang= "en" >english</p>

E:not (s)

1. Matches an element that does not contain an S-selector e.

3. Example (add a bottom edge to all list items in the list except the last one)

4. . Demo Li:not (: Last-child) {

5. border-bottom:1px solid #ddd;

6. }

E:root

1. Matches the E element in the document's root element.

3. Example (non-IE text will be black,ie9 and above for PURPLE,IE8 for Yellow,ie7 to blue,ie6 for red)

4. . Test {

5. Color:black;

6. Color:yellow\0;

7. *color:blue;

8. _color:red;

9. }

10. Html:root. Test {

11. Color:purple\0;

12. }

pseudo ElementUnlike pseudo-class elements that are specific to a particular state, a pseudo-element operates on a particular content in an element that operates at a level deeper than a pseudo-class, and therefore is much less dynamic than a pseudo-class. In fact, the purpose of designing pseudo-elements is to select the first word (mother), the first line of the element content, and select the work that the ordinary selector cannot do before or after some content. The content that it controls is actually the same as the element, but it is simply an abstraction based on elements that does not exist in the document, so it is called a pseudo-element. E :: First-letter

1. The style of the pseudo-element is applied to the first word (parent) of the element text.

E :: First-line

1. The style of the pseudo-element will be applied to the first line of the element text.

E :: Before

1. Adds new content to the front of the element's content.

E :: after

1. Adds new content to the last side of the element's content.

3. Clear Floating Example

4. . Clearfix::before,. Clearfix::after {

5. Content: "";

6. display:table;

7. }

8. . clearfix::after {

9. Clear:both;

10. }

11. . clearfix {

12. Zoom:1; /* for IE 6/7 (trigger haslayout) */

13. }

E::p laceholder

1. Controls the appearance of the placeholder for the form input box, which allows the developer/designer to change the style of the text placeholder, and the default text placeholder is light gray.

3. Example

4. Input::-webkit-input-placeholder {

5. Color: #999;

6. }

7. Input:-ms-input-placeholder {//ie10+

8. Color: #999;

9. }

10. Input:-moz-placeholder {//firefox4-18

11. Color: #999;

12. }

13. Input::-moz-placeholder {//firefox19+

14. Color: #999;

15. }

e::selection

1. defines when the element is selected background-color,color and Text-shadow( IE11 does not yet support the definition of this property.

3. Example (set the color of the selected font to #f00 and the background color to #000)

4. P::-moz-selection{background: #000; color: #f00;}

5. P::selection{background: #000; color: #f00;}

a programmer who can't write an article ~

What is the difference between a colon and two colons in CSS?