Differences between CSS pseudo classes and pseudo elements and commonly used pseudo classes and pseudo elements

skill 2 years ago Lao Li next door Last edited on 2023-08-17 07:33:12

Pseudo class and pseudo element are frequently used in front-end development, but they are particularly easy to confuse.

 Differences between CSS pseudo classes and pseudo elements and commonly used pseudo classes and pseudo elements Page 1

What are pseudo classes and pseudo elements?

Pseudo class: Start with a colon (:) to select elements in a specific state.

Pseudo element: Starts with a double colon (::), which is used to insert fictional elements into the document.

Examples of pseudo classes:

 a:hover {   color: red; }

Hover indicates a certain state of tag a (when the mouse pointer hovers over a). The selector selects the element (a) in front of the pseudo class. The style takes effect only when the state described by the pseudo class appears (when the element is suspended)

 Differences between CSS pseudo classes and pseudo elements and commonly used pseudo classes and pseudo elements Page 2

Examples of pseudo elements:

 div::before { Content: 'Old driver'; }

Before is used to create an element that is not in the document tree before the content element. The selector does not select a div, but the browser automatically creates a virtual element.

 Differences between CSS pseudo classes and pseudo elements and commonly used pseudo classes and pseudo elements Page 3

Conclusion:

Pseudo classes are used to add special effects to some existing selectors. Their essence is still a class, which acts on the label itself, but limits the state conditions.

Pseudo elements are used to add effects to non-existent virtual elements, which are essentially elements and act on the virtual elements.

Common pseudo classes:

 : When the active element is active : when the focus element has gained focus : when hover element is suspended : linkWhen the link is not visited : visited link has been visited : When the first child element is the first child element : When the last child element is the last child element : nth child() element is the nth child element : nth last child () element is the nth last child element : when the only child element is the only child element : when the first of type element is a child element of the first specific type : When the last of type element is a child element of the last specific type : nth-of-type() element is the nth child element of a specific type : nth last of type () element is the nth child element of a specific type : when the only of type element is the only child element of a specific type : not When the specified conditions are not met : when the target element id matches the hash value : When the root element is the root element of the document tree When: lang() matches the specified language : empty When the element is in the state without child elements Whether: invalid and: valid form items are valid Whether: required and: optional form items are required Whether: in range and: out of range form items are out of range : read-only and: read-write form items are read-only Whether the: enabled and: disabled form items are disabled

Common pseudo elements:

 :: first letter Select the first letter in the block element :: first line Select the first line :: before Create an element not in the document tree before :: after creates an element that is not in the document tree after :: placeholder The placeholder text of the selected form element :: file selector button Select the button in the input of type file


This article is written by@ Lao Li next door Published on August 27, 2022 at Yeluzi Blog , unless otherwise specified, all articles in this blog are original, please retain the source for reprinting.
comment (0)
 visitor
Top