Home >Web Front-end >CSS Tutorial >What are the pseudo-classes added in CSS3 and what are their functions?
The content of this article is about the pseudo-classes added in CSS3 and what are their functions? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Pseudo-classes and pseudo-elements
CSS pseudo-classes: used to add special effects to certain selectors.
CSS pseudo-element: used to add special effects to certain selectors. A pseudo-element represents a child element of an element. Although this child element exists logically, it does not actually exist in the document tree.
Pseudo element | Function |
::first-letter | Add style To the first letter of the text |
::first-line | Add the style to the first line of the text |
:: before | Insert some content before an element |
::after | Insert some content after an element |
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. This is why one of them is called pseudo-class and the other is That's why it's called a pseudo-element.
In order to distinguish pseudo-classes and pseudo-elements, CSS3 has clearly stipulated that pseudo-classes are represented by one colon, while pseudo-elements are represented by two colons. However, due to compatibility issues, most of them are still unified with a single colon. However, regardless of compatibility issues, we should try our best to develop good habits when writing and distinguish between the two.
Single colon (:) is used for CSS3 pseudo-classes, and double colon (::) is used for CSS3 pseudo-elements. A pseudo-element consists of a double colon and the name of the pseudo-element. However, the browser needs to support the old existing pseudo-element writing methods at the same time, such as: first-line, :first-letter, :before, :after, etc., while the new pseudo-elements introduced in CSS3 are no longer allowed to support the old ones. Single colon writing.
2. New pseudo-classes in CSS3
New pseudo-classes | Function |
p:first-of-type | Selects each element that is the first element of its parent element. |
Selects each | |
Selects every | |
Selects each | |
Selects each | |
Select each element that is the nth child element from the bottom of its parent element. |
|
Selects each element that is the nth element of its parent element. |
##p:nth-last-of-type(n) |
p:last-child | |
p:empty | |
p:target | |
:not(p) | |
:enabled | |
:disabled | |
:checked | |
:hover | |
:active | |
:focus | |
:link | |
:visited | |
:first-child | |
:lang | |
Related recommendations: |
What is css? Introduction to three css styles and text attributes
The above is the detailed content of What are the pseudo-classes added in CSS3 and what are their functions?. For more information, please follow other related articles on the PHP Chinese website!