The difference between CSS pseudo-classes and pseudo-elements

Pseudo classes and pseudo elements are independent of the document structure. The way they obtain elements is not based on basic element characteristics such as id, class, attribute, but on elements (pseudo-classes) in a special state, Or special content in the element (pseudo-element). The differences are summarized below:

CSS伪类 (Pseudo-classes)：用于向某些选择器添加特殊的效果，即在元素当前静态样式的基础上添加特殊效果（一般都是动态效果），所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

Add styles to links that have not been visitedAdd styles to links that have been visited Visited links add stylesAdd styles to the first child element of the elementAdd styles to elements with the specified lang attribute

备注：在 CSS 定义中，同一个元素的 :hover 必须位于 :link、:visited 之后才能生效，:active 必须位于 :hover 之后才能生效。

Properties	Description
:active	Add styles to activated elements
:focus	Add styles to elements with keyboard input focus
:hover	Add a style to the element when the mouse is hovering over it
##:link
:visited
:first-child
:lang

css pseudo Elements (Pseudo-elements): Used to set special effects to certain selectors, which is to set and operate specific content in the elements. The operation level is deeper than pseudo-classes, so the dynamics are higher than pseudo-classes. Difference.

PropertiesDescriptionAdd a special style to the first letter of textAdd a special style to the first line of textAdd content before the elementAdd content after the element

:first-letter
:first-line
:before
:after

w3c Definition of both:

• CSS Pseudo classes are used to add special effects to certain selectors.

• CSS Pseudo elements are used to add special effects to certain selectors.

Difference

The pseudo-class

:first-child and the pseudo-element :first-letter are used for comparison.

p>i:first-child {color: red}

    first
    second

//Pseudo-class

:first-child Add style to the first child elementIf we do not use pseudo-classes and want to achieve the above effect, we can do this:

.first-child {color: red}

    first
    second

That is, we add a class to the first child element and then define the style of this class. Then let’s take a look at the pseudo-element:

p::first-letter {color: red}
I am stephen lee.

//Pseudo-element

::first-letter Add style to the first letter Then if we don’t use pseudo-elements, we need to achieve What should be done to achieve the above effect?

.first-letter {color: red}
I am stephen lee.

That is, we add a

span to the first letter, and then add a style to span. The difference between the two has come out. That is:

The effect of pseudo-class can be achieved by adding an actual class, while the effect of pseudo-element needs to be achieved by adding an actual element, which is why they are a Called a pseudo-class, a reason called a pseudo-element.

Summary

The reason why pseudo-elements and pseudo-classes are so easy to confuse is because their effects are similar and their writing methods are similar, but in fact

css3 In order to distinguish between the two, it has been clearly specified that pseudo-classes are represented by one colon, while pseudo-elements are represented by two colons.

:Pseudo-classes
::Pseudo-elements

But due to compatibility issues, most of them still use a single colon. However, regardless of compatibility issues, we should try our best to develop good habits when writing and distinguish between the two.

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