Super instances explain in detail the applications of super connection in four states

Q:
I have used CSS to define the hyperlink style, but hover does not work during browsing. Why? Is it a browser problem?
A:
Although you think it may be caused by browser problems, it is more likely that the order of your style definition is incorrect. To ensure that you can see the connection styles in different states, the correct style order should be:
"Link-visited-hover-active" or "LVHA" (abbreviation ).
Core content:
Each selector has a specificity. If two selectors are applied to the same element, the selector with a higher specificity wins and has a priority. For example:
P. hithere {color: green;}/* specificity = 1, 1 */
P {color: red;}/* specificity = 1 */
The content of any section with class = hithere set to green rather than red. Both selectors are set with color, but the selector with a higher specificity will win.
How does a pseudo-class affect specificity? They have identical weighting values, and the following styles have the same specificity weighting values:

The code is as follows:	Copy code
A: link {color: blue;}/* specificity = 1, 1 */ A: active {color: red;}/* specificity = 1, 1 */ A: hover {color: magenta;}/* specificity = 1, 1 */ A: visited {color: purple;}/* specificity = 1, 1 */

These are used for hyperlink style settings. In most cases, you need to set several styles at the same time, for example, when hovering and clicking an unaccessed hyperlink, you can set different styles in the "Hover mouse" and "activate mouse" statuses. Because the above three rules can be applied to hyperlinks, and all the delimiters have the same specificity. Then, according to the rule, the last style "wins ". Therefore, the "active" style will never be displayed, because it is always overwritten by the "hover" style (that is, "hover" is preferred ). Now let's take a look at the effect of mouse hover over the Accessed hyperlink. The result will always be purple :(, because its "visited" style always gives priority to other state style rules (including "active" and "hover.
This is why CSS 1 recommends the style order:
A: link
A: visited
A: hover
A: active
In fact, the order of the first two styles can be changed, because a hyperlink cannot have both "not accessed" and "accessed" statuses. (Link means "unvisited". I don't know why it is not defined like this .)
CSS2 now allows pseudo classes to appear in the form of "Federated groups". For example:
A: visited: hover {color: maroon;}/* specificity = 2, 1 */
A: link: hover {color: magenta;}/* specificity = 2, 1 */
A: hover: active {color: cyan;}/* specificity = 2, 1 */