What is the difference between ':' and '::' in css?

Difference: One colon is a pseudo-class, and two colons are pseudo-elements.

(Recommended tutorial: CSS Tutorial)

Pseudo classes can be assigned styles independently of the elements of the document, and can be assigned to any element, logically and functionally. Similar, but it is predefined, does not exist in the document tree, and is expressed in a different way, so it is called a pseudo class.

The content controlled by a pseudo element is the same as the content controlled by an element, but the pseudo element does not exist in the document tree and is not a real element, so it is called a pseudo element.

Pseudo classes include: :first-child, :link:, vistited, :hover:, active:focus, :lang

Pseudo elements include: :first-line, :first-letter , :before, :after

The difference between pseudo-class and pseudo-element:

pseudo-class

The pseudo-class selects elements based on the state of the current element, or the element The current characteristics, rather than static signs such as the element's id, class, and attributes. Since the state changes dynamically, when an element reaches a specific state, it may get a pseudo-class style; when the state changes, it will lose this style. It can be seen from this that its function is somewhat similar to that of class, but it is based on abstraction outside of the document, so it is called a pseudo class.

:link

Pseudo class will be applied to unvisited links and is mutually exclusive with :visited.

:hover

Pseudo class will be applied to the element that the mouse pointer is hovering over.

:active

Pseudo class will be applied to activated elements, such as clicked links, pressed buttons, etc.

:visited

The pseudo class will be applied to links that have been visited, and is mutually exclusive with :link.

:focus

Pseudo class will be applied to elements that have keyboard input focus.

:first-child

The pseudo-class will be applied when the element first appears on the page.

:lang

The pseudo-class will be applied to elements with the specified lang.

(Learning video recommendation: css video tutorial)

Pseudo-element

Different from pseudo-classes for elements in special states, pseudo-elements are It operates on specific content in an element at a deeper level than pseudo-classes, so its dynamic nature is much lower than that of pseudo-classes.

In fact, the purpose of designing pseudo-elements is to select the first letter (letter) and first line of element content, and select the front or back of certain content, which is something that ordinary selectors cannot do. The content it controls is actually the same as the element, but it is only an abstraction based on the element and does not exist in the document, so it is called a pseudo element.

::first-letter

The style of the pseudo-element will be applied to the first letter (letter) of the element's text.

::first-line

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

::before

Add new content at the front of the element content.

::after

Add new content at the end of the element content.

The above is the detailed content of What is the difference between ':' and '::' in css?. For more information, please follow other related articles on the PHP Chinese website!