The difference between one colon (:) and two colons (::) in CSS

Recommended: css video tutorial

One colon is a pseudo-class, two colons are pseudo-elements

Pseudo classes can assign styles independently of the elements of the document and can be assigned to any element. They are logically similar to functional classes, but they are predefined and do not exist in the document. The expression methods are different in the tree, so they are called pseudo-classes.

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:, visited, :hover:, active:focus, :lang

Pseudo elements include: :first-line, :first-letter, :before, :after (in CSS2 compiled by Su Chen Xiaoyu .0 In the Chinese manual, :first-line and :first-letter are listed as pseudo-classes, which should be a misunderstanding)

Reminder, if your website only needs to be compatible with webkit, firefox , opera and other browsers, it is recommended to use double colon writing method for pseudo elements. If you have to be compatible with IE browser, it is safer to use CSS2 single colon writing method

The difference between pseudo-classes and pseudo-elements:

##Pseudo-class

The pseudo-class selection element is based on the current state of the element, or the current characteristics of the element, 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 links that have not been visited, the same as :visited Mutually exclusive.

: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 button etc.

:visited

pseudo-class will be applied to links that have been visited, with :linkMutually exclusive.

:focus

Pseudo class will be applied to the element that has keyboard input focus.

:first-child

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

:lang

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

Pseudo-elements

#Different from pseudo-classes that target elements in a special state, pseudo-elements target specific content in the element. When operating, the level it operates is one level deeper than that of pseudo-classes, and therefore 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 of the element's text ( mother).

::first-line

The style of the pseudo-element 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.

::before and : :after is usually used with CSS content generation.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of The difference between one colon (:) and two colons (::) in CSS. For more information, please follow other related articles on the PHP Chinese website!