A Brief Introduction to the pseudo classes of CSS (especially hover and actived)

Class
: When displaying the class attribute in HTML, people can use the vertex (.) number ~ =, So
Div. value is equivalent to Div [class ~ = Value]. In this case,. value can only be strictly applied to the class attribute in HTML.
. In CSS, styles are usually attached to the position of an element in the document tree. This simple model is sufficient in many cases, but some common layout States cannot be applied to the document tree structure. Example
For example, in HTML, no element can reference the first line of a paragraph, so there is no simple CSS selector to apply it. Therefore, CSS introduces pseudo classes and pseudo elements.
(Pseudo-element) to allow formatting Based on unexpected information in the document tree.
First
: Selector: pseudo-class {property: Value} can also be set using the class attribute of HTML.

Example:

A: link {color: Red}

Second
: Selector. Class: pseudo-class {property: Value} pseudo class is the most commonly usedPseudo class.

Example:

A. C1: link {color: Red}

Anchor (a) pseudo class

Many CSS suggestions are not supported by browsers, but there are four pseudo classes that can be safely used for connection. The anchor (a) pseudo class is the most common pseudo class. Example:

A: link {color: # ff0000}/* unaccessed link red */ A: visited {color: #00ff00}/* The accessed link is green */ A: hover {color: # ffcc00}/* The link where the cursor is suspended is orange */ A: active {color: # 0000ff}/* click the mouse to activate the link blue */

You can also use the class attribute of HTML to set the pseudo class. Example:

A. C1: link {color: # ff0000}/* unaccessed link red */ A. C1: visited {color: #00ff00}/* The accessed link is green */ A. C1: hover {color: # ffcc00}/* The link where the cursor is suspended is orange */ A. C1: Active {color: # 0000ff}/* click the mouse to activate the link blue */

Example: sequential Writing of actived.

Note: Due to the relationship of CSS priorities (the latter is higher than the previous ones), when writing a's CSS,It must be written in the order of A: Link, A: visited, A: hover, A: Actived.
.

Note:

Although CSS gives you the control to bypass, it is a good habit to use different colors to indicate the connections that have been accessed, because many users still expect this. Pseudo classes (except hover) are not commonly used. Therefore, it is not as useful as in the past. However, if you can collect comments from common users, you will find that you should use it.

Traditionally, the connection text is blue and the accessed connection is purple. Perhaps, this is the most effective and useful color. However, with the wide development of CSS, this color will not be normal, and the user will not assume that the connection must be blue or purple.

Note that

You can also use the hover pseudo class
on other elements except the connected element. Unfortunately, Internet Protocol e does not. This is really a big headache, because there are a lot of tips on other browsers to make your page look more pleasant.