1. Elements that mark a specific state:
Hover pseudo-class can choose the state when the mouse hovers over the element; The active pseudo-class can select the state of the element when it is activated; The focus pseudoclass can select the state of an element when it gets the focus. These pseudoclasses can be used to change the style of elements and achieve some interactive effects.
2. Select elements according to location:
The first child pseudo-class can select the first child element of the parent element; The last child pseudo-class can select the last child element of the parent element; The nth child pseudo-class can select the nth child element of the parent element, and so on. These pseudo-classes can be used to select elements in specific positions and achieve some layout effects.
3. Select elements according to whether they have specific attributes:
An empty pseudo-class can select an element without child elements, a required pseudo-class can select an element with required attributes, and a disabled pseudo-class can select a disabled element. These pseudo-classes can be used to select elements with specific attributes or specific attribute values, and realize some formal verification or element state control.
In a word, the function of pseudo-class is to provide more conditions for the selector to select elements more accurately and change the style or behavior of elements.
The development history of pseudoclass;
In CSS 1, only a few basic pseudo classes are available, such as link, visited, active and hover, which are mainly used to change the appearance and behavior of links. With the development of CSS, CSS2 introduces some new pseudo-classes, which expands the function of selectors and enables developers to select and control elements more accurately.
Subsequently, the release of CSS2. 1 and CSS3 further expanded the types and functions of pseudo-classes. CSS2. 1 introduces pseudo elements before and after, which can be used to insert other contents before and after the contents of elements. CSS3 introduces more pseudo-classes, such as n-child, not, empty and so on, which makes the selector more powerful and flexible.
At present, there are many pseudoclasses defined in CSS3 specification, and each pseudoclass has different application scenarios and usages. With the continuous development of CSS, more pseudo-classes may be introduced into the specification to meet the growing demand and innovative design.