I believe everyone often encounters a problem when learning css selectors, which is that pseudo-classes and pseudo-elements are silly and unclear.
In fact, the simplest way to distinguish is to see how many colon pseudo-classes are one colon, and pseudo-elements are represented by two colons.
Common pseudo-class selectors
The pseudo-class indicates that an existing element is in a certain state, but this state cannot be represented by the dom tree, so you can add styles to it through the pseudo-class. For example, the a element: hover, :active, etc. In CSS3, it is recommended to use: to indicate pseudo-element, such as: a:hover
:focus
/* 伪类将应用于拥有键盘输入焦点的元素。 */
a:hover
/* 鼠标经过触发。 */
a:link
/* 未访问的链接 */
a:visited
/* 已访问的链接 */
a:active
/* 已选中的链接 */
a:nth-child(n)
/* 选择所有a元素的父元素的第n个子元素*/
Note that the pseudo-class selector only selects elements that already exist in the DOM, and does not change the structure of the code
Common pseudo element selectors
Pseudo-elements are mainly used to create some elements that do not exist in the original dom structure tree species, for example: use ::before and ::after to add text styles before and after some existing elements, and these added content will be displayed in specific UI As seen by the user, these contents will not change the content of the document, will not appear in the DOM, and cannot be copied. They are only added in the CSS rendering layer. In CSS3, it is recommended to use :: to represent pseudo-elements, such as: div::before.
a::before
/* before" 伪元素可以在元素的内容前面插入新内容 */
a::after
/* after" 伪元素可以在元素的内容后面插入新内容 */
The two pseudo-classes ::before and ::after have a unique attribute content, which must be present.
In short, the operation object of the pseudo-element is the newly generated dom element, not the original dom structure; the pseudo-class is just the opposite, the operation object of the pseudo-element is the element that exists in the original dom structure.
The fundamental difference between pseudo-elements and pseudo-classes lies in whether the object element of the operation exists in the original dom structure.