What is the difference between pseudo-classes and pseudo-elements in css? The difference between :before and ::before

The content of this article is to introduce to you what is the difference between pseudo-classes and pseudo-elements in CSS? The difference between :before and ::before. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Pseudo class is used to select information outside the DOM tree, or information that cannot be represented by simple selectors. The former includes those elements that match the specified status, such as :visited, :active; the latter includes those elements in the DOM tree that meet certain logical conditions, such as :first- child, :first-of-type, :target.

(Equivalent to a special class selector, used to add some special effects)

Pseudo element is a virtual element that is not defined in the DOM tree. Unlike other selectors, it does not take the element as the smallest selection unit, it selects the specified content of the element. For example, ::before represents the content before the selection element, that is, ""; ::selection represents the selected content of the selection element.

(Equivalent to a special element (p, span), which can be used to store some special styles or content)

In CSS3 , there are also differences in syntax between pseudo-classes and pseudo-elements. The pseudo-elements are modified to start with ::. However, due to historical reasons, browsers continue to support pseudo-elements starting with :, but it is recommended to write them in the standard format starting with ::.

• pseudo-class

##:nth-last-of-type (n)Select the nth element of a certain type that is the penultimate element of its parent element3##:optionalSelect a form element that is optional, that is, there is no "required" attribute:read- only:read-write:root

• Pseudo-Element

Selector	Meaning	CSS
:active	Select the element that is being activated	1
:hover	Select the element that is hovered by the mouse	1
##:link	Select unvisited elements	1
:visited	Select the visited element	1
:first-child	Select the element that is the first child element of its parent element	2
:lang	Select elements with the specified lang attribute	2
:focus	Select the element with keyboard input focus	2
:enable	Select each enabled element	3
:disable	Select each disabled element	3
:checked	Select each selected element	3
:target	Select the current anchor element	3
:first-of-type	Select An element that is the first child element of a certain type of its parent element	3
:last-of -type	Select the element that is the last child element of a certain type of its parent element	3
:only-of-type	Select the element that is the only child element of a certain type that is the only child element of its parent element	3
:nth-of-type(n)	The selection satisfies its parent Element of the nth child element of a certain type	3
:only-child	Select the element that is the only child element of its parent element	3
:last-child	The selection satisfies the last element of its parent Element of element	3
:nth-child(n)	Select elements that are the nth child element of their parent element	3
:nth- last-child(n)	Select the element that is the n-th child element from the bottom of its parent element	3
:empty	Select elements that have no child elements	3
:in-range	Select elements whose values ​​are within the specified range	3
##:out-of-range	Select elements whose values ​​are not within the specified range	3
:invalid	Select elements whose values ​​are invalid	3
:valid	#Select the value that satisfies the requirement to be valid Value element	3
:not(selector)	Select elements that do not satisfy the selector	3
	##3
Select form elements with "readonly"	3
Select form elements without "readonly"	3
Select the root element	3

Selector	Meaning	CSS
::first-letter	Select the first word of the specified element	1
::first-line	Select the first line of the specified element	1
::after	In front of the content of the specified element Insert content	2
::before	at the specified Insert content after the content of the element	2
##::selection	Select the content selected by the user in the specified element	3

##The difference between:before and ::before

1. The two writing methods are equivalent, and both represent pseudo elements.

2. :before is the writing method of CSS2, ::before is the writing method of CSS3.

3. ::before has better compatibility than ::before, but it is recommended to use ::before

   # in H5 development

##Note:

Pseudo elements must be used together with the content attribute
Pseudo elements will not appear in the DOM, so they cannot be operated through js. They are just added to the CSS rendering layer

2. # #Special effects of pseudo-elements usually use:hover pseudo-class style to activate

3. .test:hover::before { /* 这时animation和transition才生效 */ }

   Reference address: https://www.cnblogs.com/ammyben/p /8012747.html

##https://blog.csdn.net/yangxiaoyanger/article/details/79712180

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