In addition to selecting elements based on id (#), class (.), and attributes ([ ]), CSS element selectors also have a very important category, which is to select elements based on their special states. They are pseudo-classes and pseudo-elements. Unlike id selectors, class selectors, attribute selectors, and derived selectors, which get elements from the HTML document hierarchy (DOM tree), pseudo-classes and pseudo-elements are predefined and independent of document elements. . The way they obtain elements is not based on basic element characteristics such as id, class, and attributes, but on elements in special states (pseudo-classes), or special content in elements (pseudo-elements). Of course, the representations of pseudo-classes and pseudo-elements also use ":" (colon) to distinguish them from other selectors.
The double colon (::) was introduced in CSS3 to distinguish pseudo-elements in pseudo-classes, such as ::before and ::after. All browsers support the use of double colons in pseudo-elements, except for IE8 and below, which are not supported.
pseudo-class
Pseudo-class selection elements are based on the state of the current element, or the current characteristics of the element, rather than static signs such as the element's id, class, and attributes. Since states are dynamic, when an element reaches a particular state, it may get a pseudo-class style; when the state changes, it loses that style. It can be seen from this that its function is somewhat similar to that of class, but it is based on the abstraction outside the document, so it is called a pseudo-class.
It should be noted that in the CSS definition, the :hover of the same element must be located after :link and :visited to take effect, and the :active must be located after :hover to take effect.
:link
The :link pseudo-element represents the normal state of the link and is used to select unvisited links. One thing to declare here, the :link pseudo-element needs to be declared before all pseudo-elements of this category. The sequence is: link, :visited, :hover, :active
:visited
The :visited pseudo-class is used for links that have already been visited. In the second position of such pseudo-elements (after the :link pseudo-class) as shown below.
:hover
The :hover pseudo-class is used to style elements when the user's mouse hovers over a link. Of course, this isn't just limited to links, although they are the most common.
This pseudo-class ranks third (after the :visited pseudo-class) among such pseudo-classes.
:active
The :active pseudo-class is used for styling elements that have been "active", such as via a touch screen tap. This can also be triggered by the keyboard, similar to the :focus pseudo-class.
The active pseudo-class is very similar to the :focus pseudo-class, except that the :active pseudo-class is an event that occurs between the mouse being clicked and released.
It is at the end of this pseudo-element (after the hover pseudo-class).
<html>
<head>
<meta content="text/html"charset="utf-8" />
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<ahrefahref="http://www.baidu.com">百度</a>
</body>
</html>
:focus
The :focus pseudo-class is used to modify the style of the element that gets the focus, such as a click on a touch device or via the keyboard. This is used more in form elements.
pseudo element
Different from pseudo-classes for elements in special states, pseudo-elements operate on specific content in elements, and they operate at a deeper level than pseudo-classes, so their dynamics are much lower than pseudo-classes. . In fact, the purpose of designing pseudo-elements is to select the first letter (letter) of the element content, the first line, and select the front or back of some content, which ordinary selectors cannot do. The content it controls is actually the same as the element, but it is only an abstraction based on the element and does not exist in the document, so it is called a pseudo element.
:first-letter
The pseudo-element's style will be applied to the first letter (letter) of the element's text.
:first-line
The pseudo-element's style will be applied to the first line of the element's text.
:before
Adds new content to the front of the element's content.
:after
Adds new content at the end of the element content.